如何让导航条高亮显示
2个回答
展开全部
在web开发中会遇到这样一个问题:当你点击某一个导航时,就让他高亮显示,其他的默认。
可以用一下两种方法解决:
1,在每一个文件中都引入头部,然后为不同的链接添加样式
缺点:比较麻烦,如果要修改样式,每个文件都要修改
2,把头部提出来,用js判断url地址,然后给当前的url加上样式(用js控制的)
<!--导航条高亮---
<!---以下是html部分,给div添加一个id--
<div class="nav_nav"
id="tabs_nav"
<a href="/"
class="active"公司首页</a<ahref="/product/product.php"
公司简介</a<ahref="/shop/map.php"雅酷地图</a<b</b<ahref="/shop/shop.php"合作商户</a<ahref="/shop/shop_search.php"商户搜索</a</div
<!---以下是js部分--
<script type="text/javascript"
//获取div下面所有的a标签(返回节点对象)
var myNav =
document.getElementByIdx_x("tabs_nav").getElementsByTagName_r("a");
//获取当前窗口的url
var myURL = document.location.href;
//循环div下面所有的链接,
for(var i=1;i<myNav.length;i++){
//获取每一个a标签的herf属性varlinks = myNav[i].getAttribute("href");
var myURL =
document.location.href;
//查看div下的链接是否包含当前窗口,如果存在,则给其添加样式
if(myURL.indexOf(links)!= -1){
myNav[i].className="active";
myNav[0].className="";}}
这个很有用,以后会用到~!
可以用一下两种方法解决:
1,在每一个文件中都引入头部,然后为不同的链接添加样式
缺点:比较麻烦,如果要修改样式,每个文件都要修改
2,把头部提出来,用js判断url地址,然后给当前的url加上样式(用js控制的)
<!--导航条高亮---
<!---以下是html部分,给div添加一个id--
<div class="nav_nav"
id="tabs_nav"
<a href="/"
class="active"公司首页</a<ahref="/product/product.php"
公司简介</a<ahref="/shop/map.php"雅酷地图</a<b</b<ahref="/shop/shop.php"合作商户</a<ahref="/shop/shop_search.php"商户搜索</a</div
<!---以下是js部分--
<script type="text/javascript"
//获取div下面所有的a标签(返回节点对象)
var myNav =
document.getElementByIdx_x("tabs_nav").getElementsByTagName_r("a");
//获取当前窗口的url
var myURL = document.location.href;
//循环div下面所有的链接,
for(var i=1;i<myNav.length;i++){
//获取每一个a标签的herf属性varlinks = myNav[i].getAttribute("href");
var myURL =
document.location.href;
//查看div下的链接是否包含当前窗口,如果存在,则给其添加样式
if(myURL.indexOf(links)!= -1){
myNav[i].className="active";
myNav[0].className="";}}
这个很有用,以后会用到~!
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询