通过javascript调用激活选项卡(从无序列表创建)

Question

我有一个通过CSS创建的选项卡菜单和一个HTML无序列表，如图所示。当单击链接时，我想向下滚动到菜单项2，并使其成为选中的(活动的)项。我得到了滚动部分，但不确定如何激活选项卡。

有人可以分享Javascript/jQuery做到这一点吗?

这是我的代码片段，请参阅小提琴的其余部分。

<a>Take me to menu item 3</a>
<div class="container">  
  <ul class="nav nav-tabs">
    <li id="home" class="active">Home</li>
    <li id="menu1-tab">Menu 1</li>
    <li id="menu2-tab">Menu 2</li>
   <li id="menu3-tab">Menu 3</li>
 </ul>
</div>
<script>
$('a').click( function() {
$("html, body").animate({ scrollTop: $('#menu2-tab').offset().top }, 1500); 
   } ); // how to also activate menu item 2?
 </script>

Answer 1

只需从所有li中删除active类，并将相同的类添加到您感兴趣的li:

$('a').click( function() {
    
    $("html, body").animate({ scrollTop: $('#menu2-tab').offset().top }, 1500); 
  
  $(".nav li").removeClass("active");
  $(".nav li").eq(2).addClass("active");
} );

.nav {
	position: relative;
	width:100%;
	margin:0 auto;
}
.nav li{
	float:left;
	position:relative;
	display:block;
	background-color:#fcfcfc;
	border:solid 1px #e2e2e2;
	height:37px;
	line-height:37px;
	text-align:center;
	color:#aeaeae;
	text-transform:uppercase;
	font-family: 'latobold', Arial, Helvetica, sans-serif;
	font-size:13px;	
	margin:0 -2px 0 0;
}
.nav.col3 li {
	width:33.3333%;
	*width:33.2222%;
}
.nav li:hover {
	text-decoration:none;
	cursor:pointer;
}
.nav li.active{
	z-index:50;
	font-family: 'latobold', Arial, Helvetica, sans-serif;
	border:solid 1px #e2e2e2;
	border-bottom:1px solid #fff;
	color:#6b7f12;
	background-color:#fff;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a>Take me to menu item 3</a> <p>
    
    Here is some other content, you can ignore this. <p>
    
    Here is some other content, you can ignore this. <p>
    
    Here is some other content, you can ignore this. <p>
    
    Here is some other content, you can ignore this. <p>
    
    Here is some other content, you can ignore this. <p>
    
    Here is some other content, you can ignore this. <p>
    
    Here is some other content, you can ignore this. <p>
    
    Here is some other content, you can ignore this. <p>
    
    Here is some other content, you can ignore this. <p>
    
    Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
<div class="container">
    
    
  <ul class="nav nav-tabs">
    <li id="home" class="active">Home</li>
    <li id="menu1-tab">Menu 1</li>
    <li id="menu2-tab">Menu 2</li>
    <li id="menu3-tab">Menu 3</li>
  </ul>
</div>

Answer 2

你可能想试试这个:

下面是HTML

<a href="#menu2-tab">Take me to menu item 3</a> <p>
    Here is some other content, you can ignore this. <p>
    Here is some other content, you can ignore this. <p>
    Here is some other content, you can ignore this. <p>
    Here is some other content, you can ignore this. <p>
    Here is some other content, you can ignore this. <p>
    Here is some other content, you can ignore this. <p>
    Here is some other content, you can ignore this. <p>
    Here is some other content, you can ignore this. <p>
    Here is some other content, you can ignore this. <p>
    Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
<div class="container">

  <ul class="nav nav-tabs">
    <li id="home" class="active">Home</li>
    <li id="menu1-tab">Menu 1</li>
    <li id="menu2-tab">Menu 2</li>
    <li id="menu3-tab">Menu 3</li>
  </ul>

</div>

下面是选择 的jquery代码

$("a").each(function(){
    var _$this = $(this);
    _$this.click(function(){
        var id = _$this.attr("href");
        $("html, body").animate({ scrollTop: $(id).offset().top }, 1500);
        $(id).parent().find(".active").removeClass("active");
        $(id).addClass("active");
    });
});