如何使用jQuery进行制表符切换

Question

如何使用jQuery切换标签？

这就是我需要的。当我点击左侧的链接时（见图片），我需要更改右侧的内容。

当我点击营销时，我需要执行以下功能：

• 从** stratergy及其争议中移除类活动**
• 然后将类激活添加到营销及其内容

以下是源代码

<ul class="marketing_box padbot30 padtop30">
     <li class="scroll_btn active "><a href="#tabs-1">Strategy</a> </li>
     <li class="scroll_btn "><a href="#tabs-2">Marketing</a> </li>
     <li class="scroll_btn "><a href="#tabs-3">Operations</a> </li>
     <li class="scroll_btn "><a href="#tabs-4">Organisation</a> </li>
     <li class="scroll_btn "><a href="#tabs-5">CorporateDevelopement</a> </li>
</ul>

<span class="active" id="tabs-1"></span>
<span  id="tabs-2"></span>

转到此链接进行实时演示 http://theteamconsultancy.com/services.html#service-1

编辑：我自己找到了一半

 $(document).ready(function() {
 $('.acordian ul li ').click(function(){
        $('.acordian ul li ').removeClass('active')
       $(this).addClass('active');
});
});

Answer 1

试试这个：

$('.marketing_box li').click(function() {
  $('.scroll_btn').removeClass('active');
 $(this).addClass('active'); 
});

Answer 2

$(".scroll_btn a").click(function(event){ //find <a> inside <class="scroll_btn"> and do something when it's clicked
  event.preventDefault(); //Stops any normal click action
  $('.active').removeClass("active"); //I suppose your active class css holds "display: block" and all #tabs-n are set to display:none by default.
  var letsShowThisOne = $(this).attr('href'); //Retrieve your link location - this is actually the ID of the next element we need.
  $(letsShowThisOne).addClass("active"); //Again, i suppose just adding this would do it, but I dont know your css.
}

我不确定你的其他代码是如何工作的，而且你没有提出任何jsfiddle，所以我只是按照我的假设去尝试做一些应该在你的例子中起作用的东西。评论每一行都是为了解释它的作用。

如果你的css设置如你的例子所示，这将改变内容。它不会改变按钮。为此添加

 $(this).addClass("active");

警告但是，您在按钮和内容上使用“活动”类。确保没有css冲突，你应该没事。当“活动”类缺失时，内容被认为是隐藏的，而按钮的“活动”类似乎只是为它添加了一些额外的样式。

Answer 3

希望下面的代码适合您

    $('.marketing_box li').click(function () {
    $('.scroll_btn').removeClass('active');
    $(this).addClass('active');
    var $id = $(this).find('a').attr('href');
    $('span[id*="tabs-"]').removeClass('active');
    $('span'+$id).addClass('active');
});

Answer 4

$(document).ready(function() {
 $('.acordian ul li ').click(function(){
        $('.acordian ul li ').removeClass('active')
       $(this).addClass('active');   
     var $id = $(this).find('a').attr('href');
    $('.prod_tab span[id*="tabs-"]').removeClass('active');
    $('.prod_tab span'+ $(this).find('a').attr('href')).addClass('active');


});
});

正在工作，但有一个跳跃