Question

我想通过选择相应的标签选择内容，如此图片

enter image description here

在此图像中有几个名为ABOUT，MACHINES等的标签，在此之下，所有内容都是一个接一个地分层。仅显示活动选项卡，并隐藏其他选项卡。我有两个问题：

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

执行此任务我这样做了。

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

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

请告诉我怎么做？

MENUBAR

<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/

如何使用jQuery选项卡选择显示内容？

1 个答案: