栏目class导航

<div id="index_nav">
  <div class="index_nav">
  <ul>
    <!-- 调用栏目 -->
    <li><a href="{DT_PATH}"><div>{$MODULE[23][name]}</div></a></li>
    <li><a href="{$MODULE[24][linkurl]}"><div>{$MODULE[24][name]}</div></a></li>
    <li><a href="{$MODULE[25][linkurl]}"><div>{$MODULE[25][name]}</div></a></li>
    <li><a href="{$MODULE[26][linkurl]}"><div>{$MODULE[26][name]}</div></a></li>
    <li><a href="{$MODULE[27][linkurl]}"><div>{$MODULE[27][name]}</div></a></li>
  </ul>
  <div class="clear"></div>
  </div>
</div>

=============================
<script type="text/javascript">
$(function(){
   window.onload=function(){
var urlSearch = window.location.href;
$('.index_nav ul').find('li').each(function(){
var id= $(this).find('a').attr('href');
if(urlSearch == id){
$(this).find('a').addClass("on");
}
});
}
});
</script>

======================

#index_nav{width: 100%;height: auto;background: #4A90E2;}
.index_nav{width: 1200px;height: auto;margin: 0 auto;}
.index_nav li{float: left;width: 200px;height: 36px; text-align: center;border-top: 4px solid #4A90E2;line-height: 36px;font-size: 18px;}
.index_nav .on div{width: 200px;height: 36px;background: #fff;color: #4A90E2;}
.index_nav a{color: #fff;}
.index_nav a:hover{color: #4A90E2;background: red;}
a{color: red;}
.index_nav li div:hover{background: #fff;}

posted @ 2017-09-26 10:58  林间有风-邓  阅读(166)  评论(0编辑  收藏  举报