溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

bootstrap的膠囊式導(dǎo)航菜單

發(fā)布時(shí)間：2020-06-28 15:38:30 來(lái)源：網(wǎng)絡(luò) 閱讀：805 作者：coffee7ceo 欄目：開發(fā)技術(shù)

從網(wǎng)上找到了一個(gè)膠囊式的導(dǎo)航菜單，但是運(yùn)行之后發(fā)現(xiàn)，并不能實(shí)現(xiàn)切換的功能（選中另一個(gè)菜單，上一個(gè)菜單的高亮背景取消，新選中的菜單高亮背景顯示），是因?yàn)槿鄙?span >js實(shí)現(xiàn)切換功能，現(xiàn)在小編告訴大家如何使用js實(shí)現(xiàn)菜單切換。

原膠囊式菜單地址：http://www.ziqiangxuetang.com/try/bootstrap3-navigation-basicpills/

加入js能切換的代碼：

<html>
<head>
<title>Bootstrap 實(shí)例 - 基本的膠囊式導(dǎo)航菜單</title>
<link >
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<p>基本的膠囊式導(dǎo)航菜單</p>
<ul class="nav nav-pills" id="list_1">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
<script>
window.onload=function(){
			      var ul=document.getElementById("list_1")
			      var li=ul.getElementsByTagName("li")
			      for(i=0;i<li.length;i++){
			        
			          li[i].onclick=function(){
			              for(j=0;j<li.length;j++){
			                  li[j].className=""
			              }
			          this.className="active"
			          }
			      }
			     }
</script>
</body>
</html>

這樣就可以啦，但是有可能會(huì)有一個(gè)問(wèn)題，就是<a></a>標(biāo)簽中的鏈接為其他地址時(shí)，因?yàn)闀?huì)跳轉(zhuǎn)到其他頁(yè)面，造成刷新，那么class="active"這個(gè)屬性還是會(huì)默認(rèn)在原來(lái)設(shè)定的標(biāo)簽上，這種情況下可以在<a></a>標(biāo)簽中添加PHP代碼（如果是PHP中使用bootstrap的話，其他語(yǔ)言也可以相應(yīng)的改），比如

<li <?php if ($num==0) echo ' class="active"'?>><a >百度</a></li>
<li <?php if ($num!=0) echo ' class="active"'?>><a >騰訊</a></li>

這樣的話就沒(méi)有什么問(wèn)題了。


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手