javascript - jQuery 选项卡标题

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 选择器时，它将仅返回具有给定 id 的第一个元素，在您的情况下，h2 和 .tab-content 都有相同的 id，因此它只返回 h2，因为它是 dom 结构中的第一个。

在这种情况下，一种可能的解决方案是对这些 ID 之一使用前缀/后缀。在下面的解决方案中，后缀 -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>

然后

$(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');
        $("#" + tab_id + '-title').addClass('current');
    });

});

演示:Fiddle