我如何使用bootstrap活动样式 [英] How do I use the bootstrap active style

问题描述

在我的导航中，当我这样做时，应用程序会显示当前页面

 <   ul     class   =  nav nav-tabs >  
 <   li     class   =  color    data-toggle   =  tab >  @ Html.ActionLink（Staffs，addStaff，SchlAdmin）<   / li  >  
 <   li     class   = 颜色    data-toggle   = 标签 >  @ Html.ActionLink（学生，addStudent，SchlAdmin ）<   / li  >  
 <   li    < span class =code-attribute> class   =  color    data-toggle   = 标签 >  @ Html.ActionLink（ 事件，staffInc，SchlAdmin）<   / li  >  
 <   li     class   = 颜色    data-toggle   = 标签 >  @ Html.ActionLink（Admin，addasset，SchlAdmin ）<   / li  >  
 <   li     class   =  color    data-toggle   = 标签 >  @ Html.ActionLink（搜索，staffSearch ，SchlAdmin）<   / li  >  
 <   li     class   =  color    data-toggle   = 标签 >  @ Html.ActionLink（个人资料，prof，SchlAdmin）<   / li  >  
 <   / ul  >  

但不导航到该页面



我尝试了什么：

 <   ul     class   =  nav nav-tabs >  
 <   li     class   =  color    data-toggle   =  tab >  @ Html.ActionLink（Staffs，addStaff，SchlAdmin）<   / li  >  
 <   li     class   =  color    data-toggle   =  tab >  @ Html.ActionLink（学生，addStudent，SchlAdmin）<   / li  >  
 <   li     class   =  color    data-toggle   =  tab >  @ Html.ActionLink（事件，staffInc，SchlAdmin）<  < span class =code-leadattribute> / li  >  
 <   li     class   =  color   数据切换  = 标签 >  @ Html.ActionLink（Admin，addasset，SchlAdmin）<   / li  >  
 <   li     class   =  color    data-toggle   =  tab >  @ Html.ActionLink（搜索，staffSearch，SchlAdmin）<   / li  >  
 <   li     class   =  color    data-toggle   =  tab >  @ Html.ActionLink（个人资料，教授，SchlAdmin）<   / li  >  
 <   / ul  >  

解决方案

通过将 data-toggle =tab添加到列表项中，您已经告诉Bootstrap项目应该在选项卡之间切换加载到当前页面。它将阻止浏览器导航到嵌套链接指定的URL。



删除 data-toggle =tab，你的链接就可以了。

 <   ul     class   =  nav nav-tabs >  
 <   li     class   = 颜色有效 >  @ Html.ActionLink（Staffs，addStaff，SchlAdmin）<   / li  < span class =code-keyword>>  
 <   li     class   =  color >  @ Html.ActionLink（Students，addStudent ，SchlAdmin）<   / li  >  
 <   li     class   =  color >  @ Html.ActionLink（事件，staffInc，SchlAdmin）<  < span class =code-leadattribute> / li  >  
 <   li     class   =  color  >  @ Html.ActionLink（Admin，addasset，SchlAdmin）<   / li  >  
 <   li     class   =  color >  @ Html.ActionLink（搜索，staffSearch，SchlAdmin） <   / li  >  
 <   li     class   =  color  >  @ Html.ActionLink（个人资料，教授，SchlAdmin）<   / li  >  
 < ;   / ul  >  

地狱，试试这个代码

 <   ul     class   =  nav nav-tabs >  
 < span class =code-keyword><   li     class   =  color active    data-toggle   = 标签 >  @ Html.ActionLink（职员，addStaff，SchlAdmin）< ;   / li  >  
 <   li     class   =  color    data-toggle   =  tab >  @ Html.ActionLink（学生，addStudent，SchlAdmin）<   / li  >  
 <   li    类  =  color    data-toggle   =  tab >  @ Html.ActionLink（事件，staffInc，SchlAdmin）<   / li  >  
 <   li     class   =  color    data-toggle   = 标签 >  @ Html.ActionLink（管理员，addasset，SchlAdmin）< ;   / li  >  
 <   li     class   =  color    data-toggle   =  tab >  @ Html.ActionLink（搜索，staffSearch，SchlAdmin）<   / li  >  
 <   li     class   =  color    data-toggle   =  tab  >  @ Html.ActionLink（个人资料，教授，SchlAdmin）<   / li  >  
 < ;   / ul  >  

检查这个

 <  ！DOCTYPE     html  >  
 <   html     lang   =  en  >  
 <   head  >  
 <   title  >  Bootstrap案例<   / title  >  
 <   meta     charset   =  utf-8 >  
  <   meta     nam e   =  viewport    content   =  width = device-width，initial- scale = 1 >  
 <   link     rel   =  样式表    href  < span class =code-keyword> =  http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css >  
 <   script     src   =  https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js < span class =code-keyword>>  <   /   script  >  
 <   script     src   =  http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js >  <   /  脚本 >  
 <   / head  >  
 <   body  >  
 
 <   div     class   = 容器 >  
 <   h2  > 动态标签<   / h2  >  
 <   ul     class   =  nav nav-tabs  >  
 <   li     class   = 有效 >  <   a     data-toggle   = 标签    href   =  #home > 主页<   / a  >  <   / li  >  
 <   li  >  <   a     data-切换  = 标签    href   = ＃menu1 < span class =code-keyword>> 菜单1 <   / a  < span class =code-keyword>>  <   / li  >  
 <   li  >  <   a     data-toggle   = 选项卡    href   =  ＃menu2 > 菜单2 < ;   / a  >  <   / li  >  
 < ;   li  >  <   a     data-toggle   =  tab    href   = ＃menu3 > 菜单3 <   / a  >  <   / li  >  
 <   / ul  >  
 
 <   div     class   = 标签内容 >  
 <   div     id   =  home    class   = 标签窗格淡入淡出 >  
 <   h3  >  HOME <   / h3  >  
 <   p  >  Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。<   / p  >  
 <   / div  >  
 <   div     id   =  menu1 < span class =code-attribute>   class   =  tab-pane fade >  
 <  < span class =code-leadattribute> h3  > 菜单1 <   / h3  >  
 <   p  >  Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 <   / p  >  
 <   / div  >  
 <   div     id   =   menu2    class   =  tab-pane fade >  
 <   h3  > 菜单2 <   / h3  >  
 <   p  >  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium，totam rem aperiam。<   / p  >  
 <   / div  >  
 <   div     id   =  menu3    class   = 标签窗格淡出 >  
 <   h3  > 菜单3 <   / h3  >  
 <   p  >  Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo。<   / p  >  
 <   / div  >  
 < span class =code-keyword><   / div  >  
 <   / div  >  
 
 <   / body  > ;  
 <   / html  >  

in my navigation, the application indicates the current page when i do this

<ul class="nav nav-tabs">
                <li class="colour" data-toggle="tab">@Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
            </ul>

but doesn't navigate to that page

What I have tried:

<ul class="nav nav-tabs">
                <li class="colour" data-toggle="tab">@Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
            </ul>

解决方案

By adding data-toggle="tab" to your list items, you've told Bootstrap that the items should switch between tabs already loaded in the current page. It will prevent the browser from navigating to the URL specified by the nested links.

Remove data-toggle="tab", and your links will work.

<ul class="nav nav-tabs">
    <li class="colour active">@Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
    <li class="colour">@Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
    <li class="colour">@Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
    <li class="colour">@Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
    <li class="colour">@Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
    <li class="colour">@Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
</ul>

Hell, try this code

<ul class="nav nav-tabs">
                <li class="colour active" data-toggle="tab">@Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
            </ul>

Check this

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>
</html>

这篇关于我如何使用bootstrap活动样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！