使用JS實(shí)現(xiàn)導(dǎo)航切換時(shí)高亮顯示的示例講解-創(chuàng)新互聯(lián)

index.html代碼內(nèi)容

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、潛山ssl等。為上1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的潛山網(wǎng)站制作公司

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>導(dǎo)航高亮顯示</title>
	<style type="text/css">
		body{
			font-size:20px;
		}
		.nav{
			list-style-type: none;
			margin:0;
			padding:0;
		}
		.clear:after{
			content:'/20';
			display:block;
			clear:both;
			height:0;
			visibility: hidden;
		}
		.nav li{
			float:left;
			background:#B1DFF5;
			margin-right:1px;
			color:#fff;
		}
		.nav li a{
			display:block;
			height:45px;
			width:120px;
			line-height:45px;
			text-align:center;
			text-decoration:none;
		}
		.active{
			background:#28b1f3;
			font-weight:bold;
		}
	</style>
</head>
<body>
	<ul class="nav clear" id="nav">
		<li><a href="index.html" rel="external nofollow" rel="external nofollow" >首頁</a></li>
		<li><a href="1.html" rel="external nofollow" rel="external nofollow" >欄目一</a></li>
		<li><a href="2.html" rel="external nofollow" rel="external nofollow" >欄目二</a></li>
		<li><a href="3.html" rel="external nofollow" rel="external nofollow" >欄目三</a></li>
	</ul>
</body>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript">
	var urlstr = location.href;
	console.log(urlstr+'/');
  var urlstatus=false;
  $("#nav a").each(function () { 
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
     $(this).addClass('active'); urlstatus = true;
    } else {
     $(this).removeClass('active');
    }
   });
  if (!urlstatus) {$("#nav a").eq(0).addClass('active'); }
</script>
</html>

本文名稱：使用JS實(shí)現(xiàn)導(dǎo)航切換時(shí)高亮顯示的示例講解-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://bm7419.com/article10/dichgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、App開發(fā)、網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容