Question

我有一些jquery标签工作

http://jsfiddle.net/barrycorrigan/e8rfqw8g/

但我无法解决的问题是，如果有人点击标签页，则标题会在标签内容之外发生变化

这就是我试过的

$(document).ready(function(){

$('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab'), $ct = $(this).closest('.tab-ct');

    $ct.find('ul.tabs li.current').removeClass('current');
    $ct.find('.tab-content.current').removeClass('current');
    $ct.find('.tab-title.current').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
});

});

HTML

<div class="tab-ct">
  <h2 id="tab1" class="tab-title current">Tab 1</h2>
  <h2 id="tab2" class="tab-title">Tab 2</h2>
  <h2 id="tab3" class="tab-title">Tab 3</h2>

  <ul class="tabs">
      <li class="tab-link current" data-tab="tab1">Tab 1</li>
      <li class="tab-link" data-tab="tab2">Tab 2</li>
      <li class="tab-link" data-tab="tab3">Tab 3</li>
  </ul>

<div id="tab1" class="tab-content current">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus metus mauris, sed lacinia ipsum ullamcorper interdum. Suspendisse potenti. Nullam.
</div>

<div id="tab2" class="tab-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus metus mauris, sed lacinia ipsum ullamcorper interdum. Suspendisse potenti. Nullam.
</div>

<div id="tab3" class="tab-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus metus mauris, sed lacinia ipsum ullamcorper interdum. Suspendisse potenti. Nullam.
</div>

</div>

标题更改正常，但现在标签内容无效。也许它与ID有关，我不确定

有什么想法吗？

Answer 1

元素的ID必须是唯一的。

当你使用id-selector时，它只返回具有给定id的第一个元素，在你的情况下，h2和.tab-content都有相同的id，所以它只返回{ {1}}因为它是dom结构中的第一个。

在这种情况下，一种可能的解决方案是对其中一个ID使用前缀/后缀。在下面的解决方案中，后缀h2被添加到-title

h2

然后

<div class="tab-ct">
     <h2 id="next-game-title" class="tab-title current">Tab 1</h2>
     <h2 id="table-title" class="tab-title">Tab 2</h2>
     <h2 id="last-game-title" class="tab-title">Tab 3</h2>

    <ul class="tabs">
        <li class="tab-link current" data-tab="next-game">17/01/15 - 15:00</li>
        <li class="tab-link" data-tab="table">Table</li>
        <li class="tab-link" data-tab="last-game">Last Game</li>
    </ul>
    <div id="next-game" class="tab-content current">Content 1</div>
    <div id="table" class="tab-content">Content 2</div>
    <div id="last-game" class="tab-content">Content 3</div>
</div>

演示：Fiddle

jQuery标签标题

1 个答案: