Как я могу динамически переключать div id

У меня есть 4 divs рядом друг с другом, каждая из которых содержит ссылку. Я хочу динамически переключать идентификатор «тока» вокруг,Как я могу динамически переключать div id

например.

<div name="1" id="current"> 
<a> 
link 
</a> 
</div> 
<div name="2"> 
<a> 
link 
</a> 
</div> 
<div name="3"> 
<a> 
link 
</a> 
</div> 
<div name="4"> 
<a> 
link 
</a> 
</div>

Как я могу динамически изменять, какой из них является текущим при нажатии ссылки?

источник

2012-04-03 Andrew Fairbairn

Вы используете jQuery? – mikevoermans

вы не должны менять идентификатор, вместо этого вам следует добавить/удалить класс под названием 'current' на каждом div. –

Я не использую jquery, я только недавно начал преподавать себе html и совсем недавно javascript, последний из которых я действительно не понимаю. –

Не делайте этого. Идентификаторы элементов не должны изменяться в зависимости от состояния веб-страницы. Вместо этого используйте другой атрибут, например class="current".

Если вы используете JQuery, который я настоятельно рекомендую, вы можете сделать это следующим образом:

$('div.tab a').click(function() { 
    $('div.tab').removeClass('current'); 
    $(this).closest('div.tab').addClass('current'); 
    return false; 
});

Чтобы сделать этот код работать, вам нужно добавить class="tab" ваших <div> элементов. Это хорошая идея, особенно если у вас есть другие <div> элементов на странице. Если вы сделаете это, текущая вкладка будет иметь атрибут class="tab current". jQuery знает, как правильно это обрабатывать.

Кроме того, я хотел бы рассмотреть вопрос об использовании атрибута id вместо атрибута name и дает ваш <a> теги атрибут href так, что браузеры будут показывать их как интерактивные элементы. Например:

<div id="tab1" class="tab"> 
    <a href="#">tab 1</a> 
</div>

Вот пример того, как включить этот сценарий (при условии, что у вас есть JQuery сохранить в виде файла jquery.js в том же каталоге, что и страница HTML):

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Testing jQuery</title> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
     $('div.tab a').click(function() { 
      $('div.tab').removeClass('current'); 
      $(this).closest('div.tab').addClass('current'); 
      return false; 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <div id="tab1" class="tab current"> 
     <a href="#">tab1 link</a> 
    </div> 
    <div id="tab2" class="tab"> 
     <a href="#">tab2 link</a> 
    </div> 
    <div id="tab3" class="tab"> 
     <a href="#">tab3 link</a> 
    </div> 
    <div id="tab4" class="tab"> 
     <a href="#">tab4 link</a> 
    </div> 
    </body> 
</html>

Несколько примечаний об этом:

Действительно, лучше разместить JavaScript своего сайта как eparate file и включить его с <script type="text/javascript" src="filename.js"></script>, но включая его «inline», как я сделал, отлично подходит для небольших проектов или просто играет с вещами.
$(function() { ... }); является сокращением для $(document).ready(function() { ... });, что означает, что код внутри этого блока будет выполнен, как только браузер завершит загрузку структуры документа HTML. Например, вы не хотите, чтобы ваш JavaScript выполнялся до того, как браузер завершил загрузку остальной части страницы.

источник

2012-04-03 20:27:05 jnylen

I например, для вашей второй строки: '$ ('div.tab.current'). removeClass ('current');' , так как вы хотите удалить .current из элемента, который уже имеет это –

Уверен, что это работает. Возможно, вы тоже быстрее, особенно если jQuery может передать этот селектор на нативный f УНКЦИИ. – jnylen

Могу ли я спросить, где бы я включил этот сегмент кода? Поскольку я совершенно не знаком с jQuery, я не уверен в правильности расположения вещей. –

Вы можете изменить все, кроме идентификатора!

источник

2012-04-03 20:24:48

используйте некоторый код javascript, например var currentId =« div1 », чтобы узнать, какое фактическое значение id действительно –

Это один из подходов. Мне нравится использовать' class = "current" 'лучше по двум причинам: вам, вероятно, не нужно чтобы отслеживать текущее значение идентификатора, а использование класса упрощает применение правил CSS. – jnylen

Я согласен с тем, что подход класса более продвинут. Я просто хочу показать ему самый простой способ использовать javascript для отслеживания текущего идентификатора –

Как я могу динамически переключать div id

ответ

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