جافا سكريبت:تبديل الروابط نشطة/غير نشطة

Question

كيف يمكنني تبديل روابط HTML من كونها نشطة/غير نشطة باستخدام JavaScript؟

ضمن ملف HTML الخاص بي، لدي رابطان تشعبيان يستدعيان وظيفة JavaScript لفرز جدول:

<a href="javascript:sort('asc');">ASC</a> | <a href="javascript:sort('desc');">DESC</a>

ما أود فعله هو أنه عندما ينقر شخص ما على الرابط "ASC"، فإنه يقوم بعد ذلك بإلغاء تنشيط الارتباط التشعبي "ASC" (لم يعد رابطًا) بحيث يصبح الرابط "DESC" نشطًا الآن فقط.

وبعد ذلك، إذا قام الشخص بالضغط على رابط "DESC"، فإنه يقوم بتعطيل رابط "DESC" وإعادة تمكين رابط "ASC".

في الأساس، أريد التبديل بين الرابط النشط، إما:"ASC" أو "DESC"

أفترض أنه يمكنك القيام بذلك باستخدام JavaScript ولكني لست متأكدًا من كيفية القيام بذلك؟

أيه أفكار؟

Answer 1

لا "يزيل" العلامة A بشكل صارم، ولكنه يزيل "الارتباط" (عن طريق إزالة href) من العلامة.

يحرر:إصدار أفضل قليلاً (تم اختباره الآن):

<script type="text/javascript" >

  function mySort( sortorder) {

      // enable the other link
      otherOrder = (sortorder == 'asc') ? 'desc' : 'asc';
      document.getElementById(otherOrder).setAttribute("href", "#");
      document.getElementById(otherOrder).onclick = function() {mySort(this.id)};

      //disable this link
      document.getElementById(sortorder).removeAttribute("href");
      document.getElementById(sortorder).onclick = "";

      //perform the sort
      doSort(sortorder);
  }
</script>

<a id="asc" href="#" onclick="mySort(this.id)" >ASC</a> | <a id="desc" href="#" onclick="mySort(this.id)" >DESC</a>

Answer 2

هل أنت على دراية بجاجعة؟ إذا كان الأمر كذلك، فقد تفكر في العديد من المكونات الإضافية لفرز الطاولة هناك، مثل tolltable.. وبعد ليس لدي أي استخدام له في الوقت الحالي، لكن عدد من المتاجر في منظمتي قد أدرجته. للحصول على نقاط المكافأة، تبدو الوثائق في هذا الرابط شاملا جدا.

يمكن jQuery أيضا أن تعطيك تحكم قوي حول ما إذا كان <a> حاضر. نأمل أن يتوقف شخص ما بمزيد من الخبرة عن طريق ث / بعض أمثلة التعليمات البرمجية التي توضح ذلك.

Answer 3

يمكنك استخدام: في قسم البرنامج النصي الخاص بك:

var asc = true;

و html

<a href="javascript:if (asc) { sort('asc'); asc=!asc; }; ">ASC</a> | <a href="javascript:if (!asc) { sort('desc'); asc=!asc; }; ">DESC</a>

(على الرغم من أنه قد يكون من الأفضل أن تدور لأولئك في وظائف)

تعديل

وفقا لتعليق المؤلف، إذا كنت ترغب في "إزالة" الروابط تماما، فقم بتشغيل: لا شيء وعرض: مضبوطا على العناصر. على سبيل المثال

<a id="asc" href="if (asc) { sort('asc'); asc=!asc; this.style.display = 'none'; document.getElementById("desc").style.display = 'inline';}; ">ASC</a> | <a id="desc" href="if (!asc) { sort('desc'); asc=!asc; this.style.display = 'none'; document.getElementById("asc").style.display = 'inline';}; ">DESC</a>

إذا كنت ترغب في استبدالها بتمتد، فاستخدم نفس التقنية لإظهار / إخفاء نظيرها SPES

Answer 4

لا تجعلهم روابط، واستخدام عنصر آخر، على سبيل المثال span.

<span onclick="sort('asc');">ASC</span> | <span onclick="sort('desc');">DESC</span>

ثم استخدم JavaScript لتعيين فئة تعرف على نمط مرئي على العنصر النشط، يمكنك تبديل هذا على كل منهما span.

يمكن لوظيفة الفرز الخاصة بك أيضا تحديد ما إذا كان الاتجاه الموفر صالحا أو لا يفعل شيئا ما ببساطة.