background: #504d4d;
}
<span style="color:#ff0000;">.nav-list li a.on{
color: #fff;
background: #504d4d;
}</span>
jquery:
$(function(){
var index = (window.location.href.split("/").length)-1;
var href = window.location.href.split("/")[index].substr(0,4);
if (href!=null){
$(".nav-list li a[href^='"+href+"']").addClass("on");
}else{
$(".nav-list li a[href='index.html']").addClass("on");
}
});其中主要的知识点在于如何检测当前网页的网址和a标签中的href对应，然后相应地改变样式，在这里用了window.location.href的方法去获取网页当前的网站，用split()切割，最后一部分的内容就是我们想要的。在正常情况下，并不需要完全匹配整个网址，所以在这里用了substr()的方法匹配前几位字母。我在css文件中添加了on类，通过给a标签增加class=“on”,然后通过js中的addClass()方法就完成了功能。
2、中英文切换的导航条
先来看一下效果图：
我采用了两种方式实现，一种用css3,另一种是用jquery实现。
首先说一下用css3如何实现：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="../css/demo2.css">
</head>
<body>
<div class="nav">
<ul class="nav-list">
<li>
<a href="index.html">
<b>index</b>
<i>首页</i>
</a>
</li>
<li>
<a href="index.html">
<b>bbs</b>
<i>论坛</i>
</a>
</li>
<li>
<a href="index.html">
<b>blog</b>
<i>博客</i>
</a>
</li>
<li>
<a href="index.html">
<b>mall</b>
<i>商城</i>
</a>
</li>
<li>
<a href="index.html">
<b>download</b>
<i>下载</i>
</a>
</li>
</ul>
</div>
</body>
</html>css:
*{
margin:0px;
padding:0px;
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width:100%;
height: 40px;
background-color: #222;
margin-top:100px;
overflow: hidden;
}
.nav-list{
width:1000px;
margin:0 auto;
height: 40px;
}
.nav-list li {
float: left;
}
.nav-list li a{
display: block;
