xml地图|网站地图|网站标签 [设为首页] [加入收藏]

切换菜单实例,bootstrap源码学习与示例

来源:http://www.ccidsi.com 作者:最新解决方案 人气:93 发布时间:2019-06-26
摘要:切换区为贰个UL列表,供给UL带"nav nav-tabs"或"navnav-pills"这两类外号。li下的标签供给有data-toggle="tab"属性,你能够透过data-target或href钦赐相应的面板。 //js部分 二 滚动监听 相持于第一种

切换区为贰个UL列表,供给UL带"nav nav-tabs"或"nav nav-pills"这两类外号。li下的标签供给有 data-toggle="tab"属性,你能够透过data-target或href钦赐相应的面板。

//js部分

二 滚动监听

相持于第一种格局的略微波折,滚动监听达成起来就大约多了。JS的兑现如下:

  1. $('#nav_tabs').scrollspy()

不过落实中,恐怕是出于内容是在全方位页面范围的,上述措施行不通,只好通过改造body标签属性的方法:

  1. <body data-spy="scroll" data-target=".navbar">...</body>
  2. 或者
  3. $('body').attr('data-spy','scroll');
  4. $('body').attr('data-target',"#navi_div");

一 可切换式标签页...

诸如此类你直接引进JS就会用了,但您不能不为中等有个别标签页的LI成分内定"active"类名

 

一 可切换式标签页 /可切换式标签列表

那么些方法是参照可切换式标签页,不需求写任何JavaScript代码,只需轻巧的为页面成分钦赐data-toggle="tab" 或 data-toggle="pill"属性就可以激活标签页或胶囊式标签页。为ul加多nav 和nav-tabs classe,就可以为其增添Bootstrap的标签页样式。

  1. <ul class="nav nav-tabs">
  2. <li><a href="#home" data-toggle="tab">首页</a></li>
  3. <li><a href="#profile" data-toggle="tab">Profile</a></li>
  4. <li><a href="#messages" data-toggle="tab">Messages</a></li>
  5. <li><a href="#settings" data-toggle="tab">Settings</a></li>
  6. </ul>

也能够用js代码来决定:

  1. <ul class="nav nav-tabs" id="myTab">
  2. <li class="active"><a href="#home">..</a></li>
  3. <li><a href="#profile">Profile</a></li>
  4. <li><a href="#messages">Messages</a></li>
  5. <li><a href="#settings">Settings</a></li>
  6. </ul>
  7. <div >
  8. <div id="home">...</div>
  9. <div id="profile">...</div>
  10. <div id="messages">...</div>
  11. <div id="settings">...</div>
  12. </div>
  13. <script>
  14. $(function () {
  15. $('#myTab a').click(function (e) {
  16. e.preventDefault();
  17. $(this).tab('show');
  18. })
  19. })
  20. </script>

不过同样的功能还是不能够效率在标签列表中,因为列表对应的片段是都展现的,只是滚动条地点不一致。所以做了有的改变,加入了原则性对应section的代码。

  1. $('#navi_tabs a').click(function (e) {
  2. e.preventDefault();
  3. $(this).tab('show');
  4. var id = $(this).attr("href");
  5. $.scrollTo(id,100,{offset:-50});
  6. })

一经你想用JS鲜明钦命哪个面板被激活,你是要对它的某部标签页的链接使用tab("show")方法,而不是魔法于它的器皿上。那么些与其余jQuery插件有一点点差异。

//html部分

有贰个导航栏列表,以及对应的剧情部分,想要完毕的功用是,除了可以稳固到内定的局地,还要加亮点击的导航条款。

面板区须求就相对宽松些,容器要求带"tab-content"类名,下边包车型大巴各种面板都须要带"tab-pane"类名。

======================================动态变化的实例===================================


for(var obj in datas[key]){
if(j==0){
$("#" key).append('<label class="btn btn-default"> <input checked="ture" class="toggle" type="radio" name="classType' key '" value="' datas[key][obj].id '">' datas[key][obj].name '</label>');
j ;
}else{
$("#" key).append('<label class="btn btn-default"> <input class="toggle" type="radio" name="classType' key '" value="' datas[key][obj].id '">' datas[key][obj].name '</label>');
}
}

          <ul id="mytab" >              <li ><a   data-toggle="tab">首页</a></li>              <li><a   data-toggle="tab">介绍</a></li>              <li><a   data-toggle="tab">消息</a></li>              <li><a   data-toggle="tab">设置</a></li>          </ul>            <div >              <div  id="home">111</div>              <div  id="profile">2222</div>              <div  id="messages">333</div>              <div  id="settings">444.</div>          </div>  

$('#myTab a').click(function (e) {
e.preventDefault();//阻止a链接的跳转行为
$(this).tab('show');//展现当前选中的链接及关联的content
})
})
</script>
</head>
<body>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#服务器">服务器</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">.home..</div>
<div class="tab-pane" id="profile">..profile.</div>
<div class="tab-pane" id="messages">..messages.</div>
<div class="tab-pane" id="settings">.settings..</div>
<div class="tab-pane" id="服务器">.#服务器..</div>
</div>

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:切换菜单实例,bootstrap源码学习与示例

关键词: 68399皇家赌场 java

上一篇:【皇家赌场】平台上搭建WordPress

下一篇:没有了

最火资讯