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-selector 时，它只会 return 具有给定 id 的第一个元素，在您的情况下 h2 和 .tab-content 具有相同的 id 所以它是 return 仅 h2，因为它在 dom 结构中是第一个。

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

jQuery 标签标题

jQuery Tabs Title

javascript

jquery

tabs