博客访问： 1642816
博文数量： 359
博客积分： 4302
博客等级： 上校
技术积分： 5516
注册时间：
悲剧，绝对的悲剧，悲剧中的悲剧。
IT168企业级官微
微信号：IT168qiye
系统架构师大会
微信号：SACC2013
分类： JavaScript
有一个导航栏列表，以及对应的内容部分，想要实现的效果是，除了能够定位到指定的部分，还要加亮点击的导航条目。
一 可切换式标签页 /&可切换式标签列表
这个方式是参考可切换式标签页，无需写任何JavaScript代码，只需简单的为页面元素指定data-toggle="tab" 或 data-toggle="pill"属性即可激活标签页或胶囊式标签页。为ul添加nav 和nav-tabs classe，即可为其添加Bootstrap的标签页样式。
&ul class="nav nav-tabs"&
&&&li&&a href="#home" data-toggle="tab"&首页&/a&&/li&
&&&li&&a href="#profile" data-toggle="tab"&Profile&/a&&/li&
&&&li&&a href="#messages" data-toggle="tab"&Messages&/a&&/li&
&&&li&&a href="#settings" data-toggle="tab"&Settings&/a&&/li&
也可以用js代码来控制：
&ul class="nav nav-tabs" id="myTab"&
&&&li class="active"&&a href="#home"&..&/a&&/li&
&&&li&&a href="#profile"&Profile&/a&&/li&
&&&li&&a href="#messages"&Messages&/a&&/li&
&&&li&&a href="#settings"&Settings&/a&&/li&
&&&div id="home"&...&/div&
&&&div id="profile"&...&/div&
&&&div id="messages"&...&/div&
&&&div id="settings"&...&/div&
&&$(function () {
&&&&$('#myTab a').click(function (e) {
&&&&&&e.preventDefault();
&&&&&&$(this).tab('show');
但是同样的效果不能作用在标签列表中，因为列表对应的部分是都显示的，只是滚动条位置不同。所以做了一些修改，加入了定位对应section的代码。
$('#navi_tabs a').click(function (e) {
&&e.preventDefault();
&&$(this).tab('show');
&&var id = $(this).attr("href");
&&$.scrollTo(id,100,{offset:-50});
二 滚动监听
相对于第一种方法的稍许曲折，滚动监听实现起来就简单多了。JS的实现如下：
$('#nav_tabs').scrollspy()
但是实现中，可能是由于内容是在整个页面范围的，上述方法无效，只能通过更改body标签属性的方式：
&body data-spy="scroll" data-target=".navbar"&...&/body&
$('body').attr('data-spy','scroll');
$('body').attr('data-target',"#navi_div");
阅读(11861) | 评论(0) | 转发(0) |
相关热门文章
给主人留下些什么吧！~~
请登录后评论。如果你要使用来搭建自己的博客网站或者资讯类网站，那么你肯定会用到标签。调用Bootstrap标签样式，不但风格简单精致，而且也省去不少编码时间，让我们一起看看。
默认Bootstrap标签样式使用
这是最基本的标签样式调用，采用default样式，与其他元素的样式相匹配，调用方式如下：&h3&带标签的标题 &span class="label label-default"&标签&/span&&/h3&需要注意的是，你需要像样式调用一样，先引入label，再引入对应的标签样式。
多彩Bootstrap标签样式使用
除了默认的灰色系以外，与其他元素相同，标签同样提供了其他几种颜色的样式调用。对应的样式如下：&span class="label label-default"&默认样式&/span& &span class="label label-primary"&主要样式（蓝色）&/span& &span class="label label-success"&成功样式（绿色）&/span& &span class="label label-info"&信息样式（浅蓝色）&/span& &span class="label label-warning"&警告样式（橙色）&/span& &span class="label label-danger"&危险样式（红色）&/span&
与Bootstrap标签样式类似的徽章样式
Bootstrap还提供了一种与标签样式类似的样式，它们称之为徽章样式。近乎椭圆的样式与标签样式区别不大，不过作用是为了显示当前未读信息或者作为条目的数量展示。徽章样式的调用也很简单，与标签样式类似：&a href="#"&收件箱&span class="badge"&42&/span&&/a&由于徽章常常与列表一起使用，所以默认只有灰色和白色两种颜色，当然如果你想要为其添加其他样式，根据官方的代码自定义即可。
写在文章最后
虽然这些组件写起来并不复杂，不过积少成多，不得不说Bootstrap的考虑还是非常周到的，赶紧把这些样式用在你的项目里吧。
佚站互联 YEAHZAN，创新团队。本文版权所有，转载时请注明出处。
对此文章有疑问？可以留言提问，或者通过
我们来获得帮助。基于Bootstrap实现tab标签切换效果
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了基于Bootstrap实现tab标签切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Bootstrap实现tab标签切换效果的具体代码，供大家参考，具体内容如下
&!DOCTYPE html&
&meta charset="utf-8"&
&title&&/title&
&link rel="stylesheet" href="css/bootstrap.min.css" /&
&script type="text/javascript" src="js/jquery.min.js" &&/script&
&script type="text/javascript" src="js/bootstrap.min.js" &&/script&
&nav class="nav navbar-default navbar-fixed-top" role="navigation"&
&div class="container-fluid"&
&div class="navbar-header"&
&button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&a href="#" class="navbar-brand"&
&img src="img/logo.jpg" style="height: 50margin-top: -15"/&
&div class="collapse navbar-collapse"&
&ul class="nav navbar-nav"&
&li class="active"&&a href="#"&首页&/a&&/li&
&li&&a href="#"&新闻&/a&&/li&
&li&&a href="#"&产品&/a&&/li&
&li class="dropdown"&
&a href="#" class="dropdown-toggle" data-toggle="dropdown"&服务&span class="caret"&&/span&&/a&
&ul class="dropdown-menu"&
&li&&a href="#"&客服在线&/a&&/li&
&li class="divider"&&/li&
&li&&a href="#"&常见问答&/a&&/li&
&li class="divider"&&/li&
&li&&a href="#"&地址电话&/a&&/li&
&li&&a href="#"&商城&/a&&/li&
&div class="navbar-form navbar-right"&
&a href="#" class="navbar-link"&登陆&/a&
&a href="#" class="navbar-link"&注册&/a&
&input type="text" class="form-control" placeholder="请输入关键字"/&
&button class="btn btn-primary"&搜索&/button&
&div style="height: 60"&&/div&
&div class="container"&
&div class="row"&
&div class="col-md-6"&
&ul id="mytab" class="nav nav-tabs"&
&li class="active"&
&a href="#xw1" data-toggle='tab'&新闻1&/a&
&a href="#xw2" data-toggle='tab'&新闻2&/a&
&div class="tab-content"&
&div class="tab-pane active fade in" id="xw1"&
&p&&a href="#"&图解TPP朋友圈：美国一直有件事没坦白(图)&/a&&span class="pull-right"&&/span&&/p&
&p&&a href="#"&图解TPP朋友圈：美国一直有件事没坦白(图)&/a&&span class="pull-right"&&/span&&/p&
&p&&a href="#"&图解TPP朋友圈：美国一直有件事没坦白(图)&/a&&span class="pull-right"&&/span&&/p&
&div class="tab-pane fade" id="xw2"&
&p&&a href="#"&预计9月CPI增长1.8% 全年涨幅难上2%&/a&&span class="pull-right"&&/span&&/p&
&p&&a href="#"&图解TPP朋友圈：美国一直有件事没坦白(图)&/a&&span class="pull-right"&&/span&&/p&
&p&&a href="#"&图解TPP朋友圈：美国一直有件事没坦白(图)&/a&&span class="pull-right"&&/span&&/p&
&div class="col-md-12"&
&ul class="breadcrumb"&
&li&&a href="#"&最佳实践1&/a&&/li&
&li&&a href="#"&最佳实践2&/a&&/li&
&li &&a href="#" class="text-muted"&最佳实践3&/a&&/li&
&div class="col-md-4"&
&div class="thumbnail"&
&img src="img/logo.jpg" /&
&div class="caption"&
&h3&&a&Bootstrap&/a&&/h3&
&p&这是一段对以上应用的一段简短说明文字。&/p&
&div class="col-md-4"&
&div class="thumbnail"&
&img src="img/logo.jpg" /&
&div class="caption"&
&h3&&a&Bootstrap&/a&&/h3&
&p&这是一段对以上应用的一段简短说明文字。&/p&
&div class="col-md-4"&
&div class="thumbnail"&
&img src="img/logo.jpg" /&
&div class="caption"&
&h3&&a&Bootstrap&/a&&/h3&
&p&这是一段对以上应用的一段简短说明文字。&/p&
&div class="col-md-4"&
&div class="thumbnail"&
&img src="img/logo.jpg" /&
&div class="caption"&
&h3&&a&Bootstrap&/a&&/h3&
&p&这是一段对以上应用的一段简短说明文字。&/p&
&div class="col-md-4"&
&div class="thumbnail"&
&img src="img/logo.jpg" /&
&div class="caption"&
&h3&&a&Bootstrap&/a&&/h3&
&p&这是一段对以上应用的一段简短说明文字。&/p&
&div class="col-md-4"&
&div class="col-md-6"&
&img src="img/logo.jpg" /&
&div class="caption"&
&h3&&a&Bootstrap&/a&&/h3&
&p&这是一段对以上应用的一段简短说明文字。&/p&
&div class="col-md-6"&
&div class="page-header"&
&h3&这是一个新的html5的开发方法&/h3&
&p&loook look&/p&
//$('#mytab a[href="#xw2"]').tab('show');
//#$('#mytab a:last').tab('show');
$('#mytab a:eq(1)').tab('show')
如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：
以上就是本文的全部内容，希望对大家学习Bootstrap程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
想用 react 实现类似 bootstrap 的标签页，如何才能优雅地实现呢？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你可以使用ant.design这个框架。省事。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不负责任的理解
bootstrap相对reactjs来说是内容而后者是框架。reactjs官方下载包里example里有和bootstrap整合的例子,所以两者不是竞争关系
-所以问题由：想用 react 实现类似 bootstrap 的标签页，如何才能优雅地实现呢？-改为：想用 react 和 bootstrap 实现标签页，如何才能优(mian)雅(qiang)地实现呢？
乱写的代码
'use strict';
var data = [{no:0,name:"Home",active:"",href:"#"},{no:1,name:"Profile",active:"",href:"#"},{no:2,name:"Messages",active:"",href:"#"}];
//Bootstrap标签项
var BootstrapNavLi = React.createClass({
handleClick:function(){
data=[{no:0,name:"Home",active:"",href:"#"},{no:1,name:"Profile",active:"",href:"#"},{no:2,name:"Messages",active:"",href:"#"}];
data.splice(this.props.no,1);
//删除指定位置指定个数的元素
data.splice(this.props.no,0,{name:this.props.name,active:"active",href:"#"});
//插入元素
render:function(){
&li onClick={this.handleClick} role="presentation" className={this.props.active}&
&a href={this.props.href}&
{this.props.name}
//Bootstrap标签页
var BootstrapNav = React.createClass({
getInitialState: function() {
return {data: data};
hClick:function(){
this.setState({data:data});
render: function(){
var lis = this.state.data.map(function(li,index){
return &BootstrapNavLi href={li.href} name={li.name} active={li.active} no={li.no} key={index} /&
&ul onClick={this.hClick} className={this.props.className}&
//外层div，包含标题
var Box = React.createClass({
render: function() {
&div className="NavExample"&
&h1&React Bootstrap 标签页切换实例&/h1&
&BootstrapNav className="nav nav-pills nav-justified"/&
React.render(&Box&&/Box&, document.getElementById('example'));
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：10410人阅读
前端（14）
&!DOCTYPE html&
&html lang=&en&&
&base target=&_self&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&meta http-equiv=&pragma& content=&no-cache&&
&meta http-equiv=&cache-control& content=&no-cache,must-ridate&&
&meta http-equiv=&expires& content=&0&&
&title&tab页切换&/title&
&link rel=&stylesheet& type=&text/css& href=&bootstrap.min.css& /&
&style type=&text/css&&
&p style=&display:&&
1.参考网站：/bootstrap/bootstrap-tab-plugin.html
2..fade增加淡入淡出效果；添加 .fade 到每个 .tab-pane 后面;
3.第一个标签页必须添加 .in 类，以便淡入显示初始内容;
&!-- tab标签 --&
&ul id=&myTab& class=&nav nav-tabs&&
&li class=&active&&
&a href=&#home& data-toggle=&tab&&
W3Cschool Home
&a href=&#ios& data-toggle=&tab&&
&li class=&dropdown&&
&a href=&#& id=&myTabDrop1& class=&dropdown-toggle& data-toggle=&dropdown&&
&b class=&caret&&&/b&
&ul class=&dropdown-menu& role=&menu& aria-labelledby=&myTabDrop1&&
&li&&a href=&#jmeter& tabindex=&-1& data-toggle=&tab&&jmeter&/a&&/li&
&li&&a href=&#ejb& tabindex=&-1& data-toggle=&tab&&ejb&/a&&/li&
&!-- 每个tab页对应的内容 --&
&div id=&myTabContent& class=&tab-content&&
&div class=&tab-pane fade in active& id=&home&&
&p&W3Cschoool菜鸟教程是一个提供最新的web技术站点。&/p&
&div class=&tab-pane fade& id=&ios&&
&p&iOS 是一个由苹果公司开发和发布的手机操作系统。&/p&
&div class=&tab-pane fade& id=&jmeter&&
&p&jMeter 是一款开源的测试软件。&/p&
&div class=&tab-pane fade& id=&ejb&&
&p&EJB是一个创建高度可扩展性和强大企业级应用程序的开发架构。&/p&
&script type=&text/javascript& src=&jquery.min.js&&&/script&
&script type=&text/javascript& src=&bootstrap.min.js&&&/script&
&script type=&text/javascript&&
有几个知识点：
& & $('#clglTab a[href=&#ysplb&]').on('shown.bs.tab', function(e){
do somehting...
关于根据连接的href来取元素的，类似的还有：
$('a[data-toggle=&tab&]')
$('#myTab a[href=&#profile&]').tab('show')
$('#myTab a:first').tab('show')
$('#myTab a:last').tab('show')$('#myTab li:eq(2) a').tab('show')2）两个事件：$(&xxx&).on(&shown.bs.tab&, function(e){})是tab页显示的时候触发的事件；show.bs.tab：
该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用event.target&和&event.relatedTarget&来定位到激活的标签页和前一个激活的标签页。
shown.bs.tab：
该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用event.target&和&event.relatedTarget&来定位到激活的标签页和前一个激活的标签页。
如：$(function(){&&&&&&$('a[data-toggle=&tab&]').on('shown.bs.tab',&function&(e)&{&&&&&&//&获取已激活的标签页的名称&&&&&&var&activeTab&=&$(e.target).text();&&&&&&&//&获取前一个激活的标签页的名称&&&&&&var&previousTab&=&$(e.relatedTarget).text();&&&&&&&$(&.active-tab&span&).html(activeTab);&&&&&&$(&.previous-tab&span&).html(previousTab);&&&});});
3）通过javascript来启用标签页：$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：125581次
积分：1717
积分：1717
排名：千里之外
原创：57篇
转载：37篇
评论：12条
(1)(1)(2)(9)(8)(6)(7)(3)(4)(6)(5)(2)(9)(25)(2)(4)