JavaScript: toggle links active/deactive

Как переключить HTML-ссылки из активных/деактивированных с помощью JavaScript?JavaScript: toggle links active/deactive

В моем HTML, у меня есть 2 гипер ссылки, которые вызывают функцию JavaScript, чтобы отсортировать таблицу:

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

То, что я хотел бы сделать, это когда кто-то нажимает на «ASC» ссылку, он затем deactives гиперссылка «ASC» (больше не ссылка), так что только сейчас активна ссылка «DESC».

Затем, если человек нажимает на ссылку «DESC», он отключает ссылку «DESC» и повторно активирует ссылку «ASC».

По сути, я хочу, чтобы переключаться между которыми связь активен, либо: «ASC» или «DESC»

Я предполагаю, что вы можете сделать это с помощью JavaScript, но я не знаю, как?

Любые идеи?

источник

2009-06-11 Anonymous

Какой HTML0 эквивалентен вам, если ссылка «отключена»? Я могу думать о различных возможностях (каждый из которых легко достигается в JS, по крайней мере, если вы добавляете используемые атрибуты id = 'в свои' 'теги :-), но я не уверен, какой из них вы имеете в виду! –

«Отключено», как в, больше не гиперссылка (удалите тег ) – 2009-06-11 05:21:11

Но когда я говорю «удалить тег », не удаляйте текст «ASC» или «DESC». Имеют смысл? – 2009-06-11 05:22:32

Не строго «удалить» тэга, но удаляет «linkness» (удалив href) из тега.

Edit: немного лучше версии (теперь проверено):

<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>

источник

2009-06-11 05:37:53 Stobor

@Stobor, похоже, это работает, но отключенная ссылка по-прежнему синяя. Таким образом, он по-прежнему представляется ссылкой, хотя, когда вы наводите курсор мыши на/отключенную ссылку - это не ссылка. Как заставить отключенную ссылку выглядеть так же, как текст? – 2009-06-11 13:29:35

@TomHankers: У вас есть какие-либо css, примененные к тегам A? Если это так, они должны применяться к A: link, а не к A. (На моей тестовой странице без каких-либо css синий и подчеркивание исчезают при нажатии.) – Stobor

вы можете использовать: в вашем разделе сценария:

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>

(хотя это могло бы быть лучше покрутите прочь в функции)

EDIT

в соответствии с комментарием автора, , если вы хотите полностью «удалить» ссылки, переключить отображение: нет и отобразить: встроенный элемент. , например.

<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>

Если вы хотите, чтобы заменить их пролетами, а затем использовать ту же технику, чтобы показать/скрыть их пролетных коллеги

источник

2009-06-11 05:26:21

Не понимаю, как бы это переключить текст «ASC» и «DESC» из ссылок на не ссылки? – 2009-06-11 05:30:16

это не помешало бы им стать «ссылками». это остановит функцию сортировки. –

Вы знакомы с JQuery? Если это так, вы можете рассмотреть различные плагины для сортировки таблицы, например TableSorter. На данный момент у меня нет никакой пользы, но многие магазины в моей организации включили его. Для бонусных очков документация по этой ссылке кажется довольно полной.

jQuery также может дать вам твердый контроль над наличием <a>. Надеюсь, кто-то, у кого больше опыта, может остановиться на некоторых примерах кода, демонстрирующих это.

источник

2009-06-11 05:40:38 spiffyman

Не связывайте их, используйте другой элемент, например span.

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

Затем установить класс, который определяет визуальный стиль на активном элементе с помощью JavaScript, вы можете переключить это на каждый span.

Ваша функция сортировки также может определять, действительно ли введенное направление действительно, и просто ничего не делать.

источник

2009-06-11 13:40:32 garrow

JavaScript: toggle links active/deactive

ответ

Смежные вопросы