Bootstrap 小功能
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#demo-navbar">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">浏览器</a>
</div>
<div class="navbar-collapse collapse" id="demo-navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#ad-carousel">综述</a></li>
<li><a href="#summary-container">简述</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" >
<li><a href="#tab-chrome" data-tab="tab-chrome">Chrome</a></li>
<li><a href="#tab-firefox" data-tab="tab-firefox">Firefox</a></li>
<li><a href="#tab-safari" data-tab="tab-safari">Safari</a></li>
<li><a href="#tab-opera" data-tab="tab-opera">Opera</a></li>
<li><a href="#tab-ie" data-tab="tab-ie">IE</a></li>
</ul>
</li>
<li><a href="#" data-toggle="modal" data-target="#about-modal">关于</a></li>
</ul>
</div>
</div>
<ul class="nav nav-tabs" role="tablist" id="tab-list">
<li class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>
<li><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li>
<li><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li>
<li><a href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li>
<li><a href="#tab-ie" role="tab" data-toggle="tab">IE</a></li>
</ul>
js
$(document).ready(function(){
$("#demo-navbar .dropdown-menu a").click(function(){
var href=$(this).attr("href");
$("#tab-list a[href='"+href+"']").tab("show"); })
});
效果:
Bootstrap 小功能的更多相关文章
- 用MVC5+EF6+WebApi 做一个小功能(三) 项目搭建
一般一个项目开始之前都会有启动会,需求交底等等,其中会有一个环节,大讲特讲项目的意义,然后取一个高大上的项目名字,咱这是一个小功能谈不上项目,但是名字不能太小气了.好吧,就叫Trump吧.没有任何含义 ...
- 三石推荐!把 Bootstrap 小清新带回家!
无敌传送门:http://fineui.com/demo_pro/default.aspx?theme=bootstrap1&menu=accordion 喜欢就来赞一个! 把麻烦留给三石 ...
- js小功能整理
/** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...
- iOS--知识综合应用成就时髦小功能点
iOS--知识综合应用成就时髦小功能点
- Java实现点击一个Jlabel增加一个Jlabel的小功能
当界面生成以后,自己想做一个点击一个Jlabel增加一个Jlabel,即类似于QQ的添加好友以后可以及时的加进一个好友.自己做了好久,发现不能及时刷新.在网上查了一下,然后自己研究了一小会.发现需要v ...
- Servlet的5种方式实现表单提交(注册小功能),后台获取表单数据
用servlet实现一个注册的小功能 ,后台获取数据. 注册页面: 注册页面代码 : <!DOCTYPE html> <html> <head> <meta ...
- android 常用小功能(第二版)
经历过一段岁月,转眼2013的半年都过去了,第二版整理好的小功能,答应大家发布的,直到今日,终于和大家相见了,第二版没有第一版多,大家也可以去参考第一版的内容,希望大家使用愉快! 目录: 1.获取当前 ...
- NSFileManager文件操作的十个小功能
NSFileManager文件操作的十个小功能 NSFileManager是一个单列类,也是一个文件管理器.可以通过NSFileManager创建文件夹.创建文件.写文件.读文件内容等等基本功能. 下 ...
- javascript实现的一个信息提示的小功能/
//什么状况.CSDN的排版怎么这么多状况,还是本人太次?调整几次都没弄好.最后一遍了-- 最近由于公司业务问题.须要做一些面向公众的平台,于是对UI要求会高一点, 对于传统的alert的这样的方式来 ...
随机推荐
- P4707 重返现世 扩展 MinMax 容斥+DP
题目传送门 https://www.luogu.org/problem/P4707 题解 很容易想到这是一个 MinMax 容斥的题目. 设每一个物品被收集的时间为 \(t_i\),那么集齐 \(k\ ...
- 一分钟小知识:scroll-behavior 让你的页面导航滚动更丝滑~
中午在[掘金]潜水摸鱼,看到这一个沸点,个人已经撸出特效: 下面放上 作者 的 掘金 地址 #掘金沸点# https://juejin.im/pin/5d649eaaf265da19752533d ...
- XP定位(APP元素定位)
Appium app自动化测试经验分享-Xpath定位总结 在我看来,自动化测试中元素定位的倚天剑和屠龙刀莫过于 Xpath和CSS,但CSS只用于Web(之前已经分享过),这次就分享下Xpath的定 ...
- 《DNS稳定保障系列3--快如闪电,域名解析秒级生效》
在刚刚过去的双十一,又是一个全民狂欢的盛宴,天猫双十一的成交量高达2684亿.无数小伙伴在淘宝.天猫里买买买,今年你又剁手了多少?言归正传,在你疯狂秒杀的时候,有没有发现,今年的购物体验一如既往的好, ...
- PHP curl_init函数
curl_init — 初始化一个cURL会话 说明 resource curl_init ([ string $url = NULL ] ) 初始化一个新的会话,返回一个cURL句柄,供curl_s ...
- 4412 使用小度wifi
本文转载至:https://blog.csdn.net/robertsong2004/article/details/42985223 作者:刘老师,华清远见嵌入式学院讲师. FS_4412可以同链接 ...
- 网络体系之TCP/IP模型
TCP/IP参考模型是因特网使用的参考模型,这个体系结构在它的两个主要协议出现以后,被称为TCP/IP参考模型.该模型将网络协议分为四层:网络接口层.网络层.运输层.应用层. TCP/IP协议不是TC ...
- 【Java】maven打包源码、依赖插件
<plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactI ...
- webbench(web性能压力测试工具)
在运维工作中,压力测试是一项很重要的工作.比如在一个网站上线之前,能承受多大访问量.在大访问量情况下性能怎样,这些数据指标好坏将会直接影响用户体验.但是,在压力测试中存在一个共性,那就是压力测试的结果 ...
- 51nod 1486 大大走格子(容斥+dp+组合数)
传送门 解题思路 暴力容斥复杂度太高,无法接受,考虑用\(dp\).设\(f(i)\)表示从左上角开始不经过前面的阻断点,只经过\(i\)的阻断点.那么可以考虑容斥,用经过\(i\)的总方案数减去前面 ...