关注前端开发
HTML5、CSS3、Javascript

导航效果

html

<div <ul>

<li><a href=”#” name=”topurl”>首页</a></li>

<li><a href=”#” name=”topurl”>手机</a></li>

<li><a href=”#” name=”topurl”>女人</a></li>

<li><a href=”#” name=”topurl”>数码家电</a></li>

<li><a href=”#” name=”topurl”>居家</a></li>

<li><a href=”#” name=”topurl”>读书</a></li>

</ul>

<script language=”javascript”>

function showmenu(){

var url = document.URL;

var urls = document.getElementsByName(“topurl”);

for(var i=0;i<urls.length;i++){

if(urls[i] == url){

urls[i].parentNode.className = ‘navselect';

return;

}

}

urls[0].parentNode.className = ‘navselect';

}

showmenu();

</script>

</div>

css

.navdefault{float:left;text-align:center;color:#fff;letter-spacing:1px;font-size:12px;}

.navselect {float:left;text-align:center;font-weight:bolder;color:#FFF;background:url(../images/head01/head_17.gif) no-repeat bottom;font-size:14px;}

转载请注明出处大前端 » 导航效果

分享: