-
一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。拿下面的示例来做演示。其HTML结构如下： <!-- 选项卡组件（菜单项nav-tabs）--> <ul id="myTab" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab">公告</a></li> <li><a href="#rule" role="tab">规则</a></li> <li><a href="#forum" role="tab">论坛</a></li> <li><a href="#security" role="tab">安全</a></li> <li><a href="#welfare" role="tab">公益</a></li> </ul> <!-- 选项卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告内容面板</div> <div class="tab-pane fade" id="rule">规则内容面板</div> <div class="tab-pane fade" id="forum">论坛内容面板</div> <div class="tab-pane fade" id="security">安全内容面板</div> <div class="tab-pane fade" id="welfare">公益内容面板</div> </div> 关键一点，选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。查看全部
-
滚动监控器设计： 1.设计一个带有下拉菜单的导航条，为每项定义一个锚点链接（比如：#blog, #html, #css, #sass, #js, @php, #about)<a href="#blog">， 同时为导航条定义一个id值（比如：navabar-menu) 2.设计监控对象。将监控对象内容都放置在一个div类名为scrollspy的容器中（类名可自由定义），并在该容器中放置多个子内容框，每个子内容框有一个标题，且每个标题都有一个id值，该id值与导航菜单项中的锚点链接名相对应 <h4 id="blog">Blog</h4>, 并且要在scrollspy这个容器中加入data-target="#navabar-menu"这一属性（这一属性值要与前面的导航条的id值保持一致) 3.为监控对象定义样式，设置空口scrollspy大小（设置高度目的是为了产生垂直滚动条） .scrollspy { height:500px; font-size:20px; overflow:auto; }查看全部
-
Dropdown插件加载时，对所有带 有“data-toggle=dropdown”样式的元素绑定了事件，用户单击带有“data-toggle=dropdown”样式的链接或按钮时， 会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时，下拉菜单的父容器（上面的示例是 “<li class="dropdown">”）会添加一个open类名，此时下拉菜单显示；再次单击时，JavaScript会删除刚添加的open类 名，此时下拉菜单将隐藏。 简单的说，要制作下拉菜单，其结构基本如下： <div class="dropdown"> <a data-toggle="dropdown" href="#">下拉菜单触发器</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div> 如果触发下拉菜单的元素是一个链接元素，为了避免点击链接，页面跳到顶部，可以使用data-target="#"来替代href="#"： <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div>查看全部
-
关于js的内容缓一缓！函数细节不清楚，以后再看！先搞清概况！分先后！查看全部
-
background-clip ： border-box | padding-box | content-box | no-clip 相关属性： background-origin | background-size 取值： border-box：从border区域向外裁剪背景。 padding-box：从padding区域向外裁剪背景。 content-box：从content区域向外裁剪背景。 no-clip：从border区域向外裁剪背景。查看全部
-
为什么无法隐藏？查看全部
-
图片轮播--声明式触轮播图的播放查看全部
-
手风琴--声明式触发手风琴查看全部
-
<div data-spy="affix" data-offset="90">affix元素</div>查看全部
-
代替data-dismiss="alert"，使用js来触发关闭警告框 $(function(){ $("#close").on("click",function(){ $(this).alert("close"); }); });查看全部
-
延时500ms查看全部
-
$(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 或者单独指定 $(function(){ $('#myTooltip').tooltip({ title:"我是一个提示框，我在顶部出现", placement:'top' }); });查看全部
-
删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性. 然后通过下面的脚本来调用： $(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); })查看全部
-
1 将 nav-tabs 换成 nav-pills， 2 将data-toggle="tab"换成data-toggle="pill"。查看全部
-
在tab-pane容器上追加fade类，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到查看全部
举报
0/150
提交
取消