Bootstrap菜單按鈕及導(dǎo)航實例解析
下拉菜單
特別聲明：因為Bootstrap的組件交互效果都是依賴于jQuery庫寫的插件，所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會生效果。
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> </ul> </div> <!--jquery一定要在bootstrap之前導(dǎo)入,后者是在前者的基礎(chǔ)上面實現(xiàn)的--> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
效果圖:
實現(xiàn)原理:
在剛開始的時候 ,其中class中有一個display:none;下面看一下css
.dropdown-menu {
position: absolute;/*設(shè)置絕對定位，相對于父元素div.dropdown*/
top: 100%;/*讓下拉菜單項在父菜單項底部，如果父元素不設(shè)置相對定位，該元素相對于body元素*/
left: 0;
z-index: 1000;/*讓下拉菜單項不被其他元素遮蓋住*/
display: none;/*默認(rèn)隱藏下拉菜單項*/
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
然后利用點擊事件,控制標(biāo)簽class的移除和添加,用來實現(xiàn)顯示和隱藏
通過js技術(shù)手段，給父容器“div.dropdown”添加或移除類名“open”來控制下拉菜單顯示或隱藏。也就是說，默認(rèn)情況，
“div.dropdown”沒有類名“open”，當(dāng)用戶第一次點擊時，“div.dropdown”會添加類名“open”；當(dāng)用戶再次點擊時，“div.dropdown”容器中的類名“open”又會被移除。我們可以通過瀏覽器的firebug查看整個過程：
默認(rèn)情況：
用戶第一次點擊：
用戶再次點擊：
open的css
.open > .dropdown-menu {
display: block;
}
下拉菜單分割線
還是上面的例子,再貼上代碼!看看效果,還是要引入js文件!后面就不多少了!
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> </ul> </div>
效果圖:
實際上就多了這么一行代碼
<li role="presentation" class="divider"></li>
下拉菜單 菜單標(biāo)題
直接上代碼
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">第一部分菜單頭部</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">第二部分菜單頭部</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> </ul> </div>
效果圖:
其實也就增加了一個代碼:
<li role="presentation" class="dropdown-header">第二部分菜單頭部</li>
下拉菜單 對齊方式
<h4>使用pull-right類使下拉菜單與父容器右邊對齊</h4> <div class="dropdown" style="float: left;"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span class="caret"></span> </button> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> </ul> </div> <br /> <br /> <h4>使用dropdown-menu-right類使下拉菜單與父容器右邊對齊</h4> <div class="dropdown" style="float: left;"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> </ul> </div> <br /> <br /> <h4>下拉菜單與父容器左邊對齊</h4> <div class="dropdown" style="float: left;"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項</a> </li> </ul> </div>
實際上是在“dropdown-menu”上添加一個“pull-right”或者“dropdown-menu-right”類名,其中css的樣式代碼
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
下拉菜單（菜單項狀態(tài)）
下拉菜單項的默認(rèn)的狀態(tài)（不用設(shè)置）有懸浮狀態(tài)（:hover）和焦點狀態(tài)（:focus）
下拉菜單項除了上面兩種狀態(tài)，還有當(dāng)前狀態(tài)（.active）和禁用狀態(tài)（.disabled）。
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> </ul> </div>
鼠標(biāo)放上去,在禁用的上面會顯示一個禁止的標(biāo)志,截圖不能截進(jìn)去!
按鈕（按鈕組）
單個按鈕在Web頁面中的運(yùn)用有時候并不能滿足我們的業(yè)務(wù)需求，常常會看到將多個按鈕組合在一起使用，比如富文本編輯器里的一組小圖標(biāo)按鈕等
<div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button> </div>
效果圖:
在這里可以根據(jù)不同的圖標(biāo)生成不同的圖標(biāo)按鈕!可以在此網(wǎng)址查看:http://getbootstrap.com/components/#glyphicons
按鈕（按鈕工具欄）
在富文本編輯器中，將按鈕組分組排列在一起，比如說復(fù)制、剪切和粘貼一組；左對齊、中間對齊、右對齊和兩端對齊一組，如下圖所示：
那么Bootstrap框架按鈕工具欄也提供了這樣的制作方法，你只需要將按鈕組“btn-group”按組放在一個大的容器“btn-toolbar”中，如下所示：
<div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button> </div> </div>
效果圖:
圖上的第二組圖圖標(biāo)是加上了一個class:
btn-group-lg:大按鈕組
btn-group-sm:小按鈕組
btn-group-xs:超小按鈕組
只需要在“.btn-group”類名上追加對應(yīng)的類名，就可以得到不同大小的按鈕組。
按鈕（嵌套分組）
很多時候，我們常把下拉菜單和普通的按鈕組排列在一起，實現(xiàn)類似于導(dǎo)航菜單的效果
使用的時候，只需要把當(dāng)初制作下拉菜單的“dropdown”的容器換成“btn-group”，并且和普通的按鈕放在同一級。
<div class="btn-group"> <button type="button" class="btn btn-default">首頁</button> <button type="button" class="btn btn-default">產(chǎn)品展示</button> <button type="button" class="btn btn-default">案例分析</button> <button type="button" class="btn btn-default">聯(lián)系我們</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">關(guān)于我們<span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-left"> <li><a href="##">公司簡介</a></li> <li><a href="##">企業(yè)文化</a></li> <li><a href="##">組織結(jié)構(gòu)</a></li> <li><a href="##">客服服務(wù)</a></li> </ul> </div> </div>
效果圖:
按鈕（垂直分組）
前面看到的示例，按鈕組都是水平顯示的。但在實際運(yùn)用當(dāng)中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風(fēng)格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可
<div class="btn-group-vertical"> <button class="btn btn-default" type="button">首頁</button> <button class="btn btn-default" type="button">產(chǎn)品展示</button> <button class="btn btn-default" type="button">案例分析</button> <button class="btn btn-default" type="button">聯(lián)系我們</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">關(guān)于我們<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司簡介</a></li> <li><a href="##">企業(yè)文化</a></li> <li><a href="##">組織結(jié)構(gòu)</a></li> <li><a href="##">客服服務(wù)</a></li> </ul> </div> </div>
效果圖:
按鈕（等分按鈕）
等分按鈕的效果在移動端上特別的實用。整個按鈕組寬度是容器的100%，而按鈕組里面的每個按鈕平分整個容器寬度。例如，如果你按鈕組里面有五個按鈕，那么每個按鈕是20%的寬度，如果有四個按鈕，那么每個按鈕是25%寬度，以此類推。
等分按鈕也常被稱為是自適應(yīng)分組按鈕，其實現(xiàn)方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個“btn-group-justified”類名，如下所示：
<div class="btn-wrap"> <div class="btn-group btn-group-justified"> <a class="btn btn-default" href="#">首頁</a> <a class="btn btn-default" href="#">產(chǎn)品展示</a> <a class="btn btn-default" href="#">案例分析</a> <a class="btn btn-default" href="#">聯(lián)系我們</a> </div> </div>
修改一下屏幕的寬度
特別聲明：在制作等分按鈕組時，請盡量使用<a>標(biāo)簽元素來制作按鈕，因為使用<button>標(biāo)簽元素時，使用display:table在部分瀏覽器下支持并不友好。
按鈕的向下向上三角形
按鈕的向下三角形，我們是通過在標(biāo)簽中添加一個“”標(biāo)簽元素，并且命名為“caret”:
有的時候我們的下拉菜單會向上彈起（接下來一個小節(jié)會介紹），這個時候我們的三角方向需要朝上顯示，實現(xiàn)方法：需要在“.btn-group”類上追加“dropup”類名（這也是做向上彈起下拉菜單要用的類名）。
<div class="btn-group dropup"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">按鈕下拉菜單項</a></li> <li><a href="##">按鈕下拉菜單項</a></li> <li><a href="##">按鈕下拉菜單項</a></li> <li><a href="##">按鈕下拉菜單項</a></li> </ul> </div>
效果圖:
導(dǎo)航（基礎(chǔ)樣式）
導(dǎo)航對于一位前端人員來說并不陌生。可以說導(dǎo)航是一個網(wǎng)站重要的元素組件之一，可以便于用戶查找網(wǎng)站所提供的各項功能服務(wù)。導(dǎo)航的制作方法也是千奇百怪，五花八門。
Bootstrap框架中制作導(dǎo)航條主要通過“.nav”樣式。默認(rèn)的“.nav”樣式不提供默認(rèn)的導(dǎo)航樣式，必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類。比如右側(cè)代碼編輯器中就有一個tab導(dǎo)航條的例子，他的實現(xiàn)方法就是為ul標(biāo)簽加入.nav和nav-tabs兩個類樣式。
<ul class="nav nav-tabs"> <li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
導(dǎo)航（標(biāo)簽形tab導(dǎo)航）
標(biāo)簽形導(dǎo)航，也稱為選項卡導(dǎo)航。特別是在很多內(nèi)容分塊顯示的時，使用這種選項卡來分組十分適合。
標(biāo)簽形導(dǎo)航是通過“nav-tabs”樣式來實現(xiàn)。在制作標(biāo)簽形導(dǎo)航時需要在原導(dǎo)航“nav”上追加此類名
<ul class="nav nav-tabs"> <li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
其實上例的效果和我們平時看到的選項卡效果并不一致。一般情況之下，選項卡教會有一個當(dāng)前選中項。其實在Bootstrap框架也相應(yīng)提供了。假設(shè)我們想讓“Home”項為當(dāng)前選中項，只需要在其標(biāo)簽上添加類名“class=”active””即可
<ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
效果圖:
除了當(dāng)前項之外，有的選項卡還帶有禁用狀態(tài)，實現(xiàn)這樣的效果，只需要在標(biāo)簽項上添加“class=”disabled””即可：
<ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
效果圖:
導(dǎo)航（膠囊形(pills)導(dǎo)航）
膠囊形（pills）導(dǎo)航聽起來有點別扭，因為其外形看起來有點像膠囊形狀。但其更像我們平時看到的大眾形導(dǎo)航。當(dāng)前項高亮顯示，并帶有圓角效果。其實現(xiàn)方法和“nav-tabs”類似，同樣的結(jié)構(gòu)，只需要把類名“nav-tabs”換成“nav-pills”即可：
<ul class="nav nav-pills"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
效果圖:
和上面說的是一樣的!
導(dǎo)航（垂直堆疊的導(dǎo)航）
在實際運(yùn)用當(dāng)中，除了水平導(dǎo)航之外，還有垂直導(dǎo)航，就類似前面介紹的垂直排列按鈕一樣。制作垂直堆疊導(dǎo)航只需要在“nav-pills”的基礎(chǔ)上添加一個“nav-stacked”類名即可
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
效果圖:
在下拉菜單一節(jié)中，下拉菜單組與組之間有一個分隔線。其實在垂直堆疊導(dǎo)航也具有這樣的效果，只需要添加在導(dǎo)航項之間添加“
”即可：
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="nav-divider"></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
效果圖:
自適應(yīng)導(dǎo)航（使用）
自適應(yīng)導(dǎo)航指的是導(dǎo)航占據(jù)容器全部寬度，而且菜單項可以像表格的單元格一樣自適應(yīng)寬度。自適應(yīng)導(dǎo)航和前面使用“btn-group-justified”制作的自適應(yīng)按鈕組是一樣的。只不過在制作自適應(yīng)導(dǎo)航時更換了另一個類名“nav-justified”。當(dāng)然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。如：
<ul class="nav nav-tabs nav-justified"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
效果圖:
這是不同屏幕
導(dǎo)航加下拉菜單（二級導(dǎo)航）
前面介紹的都是使用Bootstrap框架制作一級導(dǎo)航，但很多時候，在Web頁面中是離不開二級導(dǎo)航的效果。那么在Bootstrap框架中制作二級導(dǎo)航就更容易了。只需要將li當(dāng)作父容器，使用類名“dropdown”，同時在li中嵌套另一個列表ul，使用前面介紹下拉菜單的方法就可以：
<ul class="nav nav-pills "> <li class="active"><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="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul> </li> <li><a href="##">關(guān)于我們</a></li> </ul>
效果圖:
通過瀏覽器調(diào)試工具，不難發(fā)現(xiàn)，點擊有二級導(dǎo)航的菜單項，會自動添加“open”類名，再次點擊就會刪除添加的“open”類名和那個下拉菜單的實現(xiàn)原理是一樣的!
那么在二級導(dǎo)航中使用分割線,只需要添加“<li class=”nav-divider”></li>”這樣的一個空標(biāo)簽就可以了。
面包屑式導(dǎo)航
面包屑(Breadcrumb)一般用于導(dǎo)航，主要是起的作用是告訴用戶現(xiàn)在所處頁面的位置（當(dāng)前位置）
<ol class="breadcrumb"> <li><a href="#">首頁</a></li> <li><a href="#">我的書</a></li> <li class="active">《圖解CSS3》</li> </ol>
效果圖:
相關(guān)文章
本文主要介紹javascript如何定義對象數(shù)組，兩種方法，比較實用，希望能給大家做一個參考。2016-06-06
今天小編就為大家分享一篇關(guān)于js中實例與對象的區(qū)別講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了Bootstrap組件系列之福利篇幾款好用的組件（推薦二）的相關(guān)資料,需要的朋友可以參考下2016-07-07
使用js簡單實現(xiàn)了樹菜單！具體實現(xiàn)實例代碼如下，相信自己你一定可以實現(xiàn)的更好2013-11-11
多次注冊事件會導(dǎo)致一個事件被觸發(fā)多次的解決方法
一個JavaScript邏輯，會自動綁定函數(shù)到按鈕的click事件，但是這段代碼會反復(fù)注冊事件，具體的解決方法如下，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了js中iframe調(diào)用父頁面的方法,可通過window.parent.方法()來實現(xiàn),非常具有實用價值,需要的朋友可以參考下2014-10-10
看論壇里技術(shù)區(qū)沒有平均給分的功能，感覺散分很不方便，就寫了一個：IE8,FF3.5下測試ok2009-11-11
本篇文章通過代碼示例給大家詳細(xì)分析了javascript基礎(chǔ)內(nèi)容模塊加載器的相關(guān)知識點，一起學(xué)習(xí)下。2018-03-03
JavaScript錯誤處理之分析 Uncaught(in promise) error的
在開發(fā)過程中,JavaScript的錯誤處理是一個老生常談的話題,當(dāng)應(yīng)用程序發(fā)生未捕獲的異常時,Uncaught(in promise) error是其中最常見的錯誤類型,這篇文章將從多個方面詳細(xì)闡述這種錯誤類型的原因與解決方案,感興趣的朋友一起看看吧2023-12-12
layui 實現(xiàn)table翻頁滾動條位置保持不變的例子
今天小編就為大家分享一篇layui 實現(xiàn)table翻頁滾動條位置保持不變的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09