-
一個選項(xiàng)卡主要包括兩個部分，其一是菜單項(xiàng)，其二是內(nèi)容面板。拿下面的示例來做演示。其HTML結(jié)構(gòu)如下： <!-- 選項(xiàng)卡組件（菜單項(xiàng)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">規(guī)則</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> <!-- 選項(xiàng)卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div> <div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div> <div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div> <div class="tab-pane fade" id="security">安全內(nèi)容面板</div> <div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div> </div> 關(guān)鍵一點(diǎn)，選項(xiàng)卡中鏈接的錨點(diǎn)要與對應(yīng)的面板內(nèi)容容器的ID相匹配。查看全部
-
滾動監(jiān)控器設(shè)計(jì)： 1.設(shè)計(jì)一個帶有下拉菜單的導(dǎo)航條，為每項(xiàng)定義一個錨點(diǎn)鏈接（比如：#blog, #html, #css, #sass, #js, @php, #about)<a href="#blog">， 同時為導(dǎo)航條定義一個id值（比如：navabar-menu) 2.設(shè)計(jì)監(jiān)控對象。將監(jiān)控對象內(nèi)容都放置在一個div類名為scrollspy的容器中（類名可自由定義），并在該容器中放置多個子內(nèi)容框，每個子內(nèi)容框有一個標(biāo)題，且每個標(biāo)題都有一個id值，該id值與導(dǎo)航菜單項(xiàng)中的錨點(diǎn)鏈接名相對應(yīng) <h4 id="blog">Blog</h4>, 并且要在scrollspy這個容器中加入data-target="#navabar-menu"這一屬性（這一屬性值要與前面的導(dǎo)航條的id值保持一致) 3.為監(jiān)控對象定義樣式，設(shè)置空口scrollspy大小（設(shè)置高度目的是為了產(chǎn)生垂直滾動條） .scrollspy { height:500px; font-size:20px; overflow:auto; }查看全部
-
Dropdown插件加載時，對所有帶 有“data-toggle=dropdown”樣式的元素綁定了事件，用戶單擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時， 會觸發(fā)JavaScript事件代碼。當(dāng)用戶點(diǎn)擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時，下拉菜單的父容器（上面的示例是 “<li class="dropdown">”）會添加一個open類名，此時下拉菜單顯示；再次單擊時，JavaScript會刪除剛添加的open類 名，此時下拉菜單將隱藏。 簡單的說，要制作下拉菜單，其結(jié)構(gòu)基本如下： <div class="dropdown"> <a data-toggle="dropdown" href="#">下拉菜單觸發(fā)器</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div> 如果觸發(fā)下拉菜單的元素是一個鏈接元素，為了避免點(diǎn)擊鏈接，頁面跳到頂部，可以使用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>查看全部
-
關(guān)于js的內(nèi)容緩一緩！函數(shù)細(xì)節(jié)不清楚，以后再看！先搞清概況！分先后！查看全部
-
background-clip ： border-box | padding-box | content-box | no-clip 相關(guān)屬性： background-origin | background-size 取值： border-box：從border區(qū)域向外裁剪背景。 padding-box：從padding區(qū)域向外裁剪背景。 content-box：從content區(qū)域向外裁剪背景。 no-clip：從border區(qū)域向外裁剪背景。查看全部
-
為什么無法隱藏？查看全部
-
圖片輪播--聲明式觸輪播圖的播放查看全部
-
手風(fēng)琴--聲明式觸發(fā)手風(fēng)琴查看全部
-
<div data-spy="affix" data-offset="90">affix元素</div>查看全部
-
代替data-dismiss="alert"，使用js來觸發(fā)關(guān)閉警告框 $(function(){ $("#close").on("click",function(){ $(this).alert("close"); }); });查看全部
-
延時500ms查看全部
-
$(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 或者單獨(dú)指定 $(function(){ $('#myTooltip').tooltip({ title:"我是一個提示框，我在頂部出現(xiàn)", placement:'top' }); });查看全部
-
刪除HTML中自定義的 data-toggle="tab" 或 data-toggle="pill" 的屬性. 然后通過下面的腳本來調(diào)用： $(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類，最初的默認(rèn)顯示的內(nèi)容面板一定要記得加上 in 類名，不然其內(nèi)容用戶無法看到查看全部
舉報(bào)
0/150
提交
取消