Question

我有一个通过CSS创建的标签式菜单和一个HTML无序列表，如this fiddle所示。单击链接时，我想向下滚动到菜单项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

只需从所有active中删除li课程，然后将同一课程添加到您感兴趣的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");
    });
});

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

2 个答案: