DIV+CSS+JS实现当前页面选中的一个方法

8次阅读

一个网站 当访问者点了某个栏目以后 这个相应的栏目就变换一下他的样式 让他自己看起来与众不同,这样的话能够非常高的提高用户体验度 让用户在你的网站多停留那么些时间,最近发现一个新的利用 js 申明的方法来实现的 以下就是死路和具体的实现步骤。

 1、先定义好一个 CSS 样式 例如:.navon{color:#ff0000;} /*  定义颜色为红色  */

 2、给导航链接每一个不同的栏目定义不同的 ID

<ul>
   <li><a href="#" id="nav1"> 网站首页 </a> </li>
  <li><a href="#" id="nav2"> 关于我们 </a> </li>  
  <li><a href="#" id="nav3"> 新闻列表 </a> </li>
  <li><a href="#" id="nav4"> 产品展示 </a> </li>
  <li><a href="#" id="nav5"> 联系我们 </a> </li>
</ul>
3、在各自对应的栏目加上对应的 JS 代码   例如:

网站首页页面 head 之间加入

<script type="text/javascript">
$(function(){
      $("#nav1").attr("class","navon");
});
</script>

联系我们 head 之间加入

<script type="text/javascript">
$(function(){
      $("#nav5").attr("class","navon");
});
</script>

其他的以此类推 …

实现的效果如图:

DIV+CSS+JS 实现当前页面选中的一个方法

正文完