您现在的位置是：首页 > 网站建设网站建设

怎样判断导航中当前所在分类或者首页等然后选择对应的css class="uns...

江湖快报网2022-12-18 21:26:41【网站建设】人已围观

简介实际上通常当前栏目高亮都是后台程序或js在判断当前栏目并输出对应的html，不过只用css和html也能做。

不是用两个class，.select和.unselect就行的，每个栏目必须给一个单独的cl

实际上通常当前栏目高亮都是后台程序或js在判断当前栏目并输出对应的html，不过只用css和html也能做。

不是用两个class，.select和.unselect就行的，每个栏目必须给一个单独的class或id，下面例子我用的class。

<body>
<ul id=nav>
<li class=nav1><a>首页</a></li>
<li class=nav2><a>新闻</a></li>
<li class=nav3><a>产品</a></li>
<li class=nav4><a>联系</a></li>
</ul>
</body>

先给个导航的所有链接一个默认全局样式，我没把它搞成带背景的横排按钮之类的，只是设了所有导航栏文字为红色。

#nav li a{color:red;}

然后，当前这个栏目对应的链接高亮为文字蓝色：

#home .nav1 a ,
#news .nav2 a ,
#product .nav3 a ,
#cous .nav4 a{color:blue;}

最后，你要给每个页面的body加上一个对应的id(也可以给nav找个父级加这个id，不一定要加在body上)；比如：
当前是首页则<body id=home>
当前是产品页，则<body id=product>

当前导航高亮显示，其实也比较简单。
在.cs文件中获取当前url路径：url = Request.Url.ToString().ToLower();
在导航相应样式写上：
<%=url.IndexOf(default.aspx) != -1 ? class=\select\ : class=\unselect\%>
我的项目中都是这么处理的，希望能帮到你！