代码之家 › 专栏 › 技术社区 › john Gu

如何在用户单击导航选项卡时设置活动类

tabs twitter-bootstrap asp.net css jquery

john Gu · 技术社区 · 10 年前

我的asp.net mvc web应用程序中有以下标记,其中显示两个选项卡,我使用的是bootstrap 2.0.2:-

 <ul class="nav nav-tabs" id="myTab">

     @if(Model.hasRacks)
    {
   <li> @Ajax.ActionLink("Show Related Racks", "CustomerRack","Customer",
    new {customerID = Model.AccountDefinition.ORG_ID},
    new AjaxOptions {
 InsertionMode = InsertionMode.Replace,
 UpdateTargetId = "detail"  ,
 LoadingElementId = "progress",
  OnSuccess="detailsuccess"

}
)
   </li>  }
      @if(Model.hasServer)
    {
    <li >@Ajax.ActionLink("Show Related Servers", "CustomerServer","Customer",
    new {customerID = Model.AccountDefinition.ORG_ID},
    new AjaxOptions {
 InsertionMode = InsertionMode.Replace,
 UpdateTargetId = "detail"  ,
 LoadingElementId = "progress",

 OnSuccess="detailsuccess",



}
)</li>}</ul>

我试图实现的是 class="active" 当用户单击某个选项卡时,当前用户单击的选项卡将不会突出显示为活动?有人能帮忙吗?

1 回复 | 直到 10 年前

DanielRS 10 年前

我没有ASP.net的经验,但我知道它是一个服务器端框架,对吗?您要做的事情需要客户端javascript,下面是Codepen代码段: http://codepen.io/anon/pen/JoeMjV

它们的关键部分是java脚本摘录:

// Using jQuery javascript library
$(document).ready(function() {
    $('ul.nav li').click(function() {
        // Remove previous clicked tab class
        $('ul.nav li').removeClass('nav-active');
        // Add class to the tab that triggered the click event
        $(this).addClass('nav-active');
    });
});

顺致敬意,

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

3 年前

Bryan Santos · 固定表头与引导

3 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

3 年前

tym · 根据用户偏好显示字段

3 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

3 年前

Pavel · 当验证DIV可见时,引导网格会移动

7 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

7 年前

Alexander David · 折叠卡打开,然后立即再次关闭

7 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

7 年前