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

Question

我有一个通过 CSS 创建的选项卡式菜单和一个 HTML 无序列表，如 this fiddle 所示。 。单击链接时，我想向下滚动到菜单项 2 并将其设为选定(事件)菜单项。我将滚动部分向下滚动，但不知道如何激活该选项卡。

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

这是我的代码片段，其余部分请参阅 fiddle ..

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