javascript - 如何使用 jQuery 通过选项卡选择来显示内容？

Question

我想通过选择适当的标签来选择内容，就像这张图片中一样

在这张图片中，有几个名为 ABOUT、MACHINES 等的选项卡，在其下方，所有内容都层层叠叠。仅显示事件选项卡，其他选项卡隐藏。我有两个问题:

1.每当我点击一个标签时，所选标签的背景颜色就会改变。

为了完成这个任务，我做了这个。

$(document).ready(function(){
    $('#profiletabs a').click(function() {
        $('#profiletabs a.activetab').removeClass('activetab');
        $(this).addClass('activetab');
    });
});

2.每当我选择一个标签时，就会显示相应的内容标签

请告诉我该怎么做？

菜单栏

<div id="profiletabs">
   <ul>
        <li ><a href="#" class="activetab" onclick="showtab(1)">About</a>      </li>
        <li><a href="#" onclick="showtab(2)">Machines</a></li>
        <li><a href="#" onclick="showtab(3)">users</a></li>
        <li><a href="#" onclick="showtab(4)">Marketing</a></li>
        <li><a href="#" onclick="showtab(5)">Charges</a></li>
        <li><a href="#" onclick="showtab(6)">Discounts</a></li>
        <li><a href="#" onclick="showtab(7)">Timings</a></li>
        <li><a href="#" onclick="showtab(8)">Programs</a></li>
        <li><a href="#" onclick="showtab(9)">Facilities</a></li>
        <li><a href="#" onclick="showtab(10)">Special Programs</a></li>
        <li><a href="#" onclick="showtab(11)">Staff</a></li>
        <li><a href="#" onclick="showtab(12)">Contact</a></li>

    </ul>
</div> 

内容

  <div class="content active" style="display: block" id="tab1">
          <div class="heading">About</div>
             <table class="contenttable">

           <tr><td class="lefttd">Address:</td><td class="righttd">CMC mkt. , Near union bank of India , Main dadari road, Noida Sector-49</td></tr>

           <tr><td class="lefttd">Location:</td><td class="righttd">Noida.</td></tr>
           <tr><td class="lefttd">Landmark:</td><td class="righttd">Near Golfview Hotel.</td></tr>
           <tr><td class="lefttd">Area:</td><td class="righttd">200 Sq Fit.</td></tr>
           <tr><td class="lefttd">Speciality/UPS:</td><td class="righttd">Group Ex.</td></tr>
           <tr><td class="lefttd">Branches in India:</td><td class="righttd">6.</td></tr>
           <tr><td class="lefttd">Surrounding:</td><td class="righttd">Abc.</td></tr>
           <tr><td class="lefttd">History:</td><td class="righttd">Since 2001</td></tr>
             </table>
          </div>

其他内容依此类推....为了显示我这样做的内容

JQUERY

$(document).ready(function (){
    var curnt=1;
    function showtab(next)
    {
        $(".rightcontainer #tab"+curnt).removeClass("active");
        $(".rightcontainer #tab"+next).addClass("active");
        curnt=next;
    }
});

谢谢。

Answer 1

我建议设置一个数据值，将选项卡链接到内容 div。然后您可以检查该数据值并找到要显示的内容 div:

$('#tabs li').click(function() {
    $('#tabs .active').removeClass('active');
    var tab = $(this).addClass('active').data('tab-content');
    $('.tab-content.active').removeClass('active');
    $('.tab-content[data-tab-content='+tab+']').addClass('active');
});


<ul id="tabs">
    <li data-tab-content="tab1">Tab 1</li>
    <li data-tab-content="tab2">Tab 2</li>
</ul>

<div class="tab-content" data-tab-content="tab1">My tab 1 content</div>
<div class="tab-content" data-tab-content="tab2">Tab2 content div</div>

http://jsfiddle.net/YevZr/