当前选中样式如何写-HTML教程-爱易网页

当前选中样式如何写

日期：2014-05-17　浏览次数：20755 次

当前选中样式怎么写?
代码如下，nav_now是“当前”导航的样式，我想实现点到哪个导航，那个导航的的颜色变成白色，请问怎么实现？
效果类似：
http://59.173.12.139:70/jointowntech/channels/3.html
的左边部分。

CSS code


/*主导航*/
#nav {width:405px; height:588px; background:url(../images/nav_bg.png) no-repeat; position:absolute; top:0px; right:0px;}

#nav ul {margin-top:70px; margin-left:85px;}

#nav li {height:36px; background:url(../images/nav_icon.png) no-repeat 0 0; padding-left:50px; text-align:left; margin-bottom:50px;}

#nav li a {font-size:24px; font-weight:bold; line-height:36px; text-decoration:none; color:#ffd600;}

#nav li a:hover {color:#FFF;}

/*当前链接*/

a.nav_now {font-size:24px; font-weight:bold; line-height:36px; text-decoration:none; color:#FFF;}

a.nav_now:link {color:#FFF;}

a.nav_now:visited {color:#FFF;}

a.nav_now:hover {color:ffd600;}
/*主导航栏目定位*/

#nav_01 {margin-left:0px;}

#nav_02 {margin-left:42px;}

#nav_03 {margin-left:67px;}

#nav_04 {margin-left:80px;}

#nav_05 {margin-left:85px;}

#nav_06 {margin-left:85px;}

HTML code


<div id="nav">

    <ul>

      <li id="nav_01" ><a href="main.html">首页</a></li>

      <li id="nav_02"><a href="#">介绍</a></li>

      <li id="nav_03"><a href="#">政务</a></li>

      <li id="nav_04"><a href="#">交易平台</a></li>

      <li id="nav_05"><a href="#">商贸</a></li>

      <li id="nav_06"><a href="#">物流</a></li>

    </ul>

  </div>

------解决方案--------------------

HTML code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
        #test a:hover {color:white;}
        </style>
    </head>
    <body>
    <div id="test">
      <li id="nav_01" ><a href="main.html">首页</a></li>

      <li id="nav_02"><a href="#">介绍</a></li>

      <li id="nav_03"><a href="#">政务</a></li>

      <li id="nav_04"><a href="#">交易平台</a></li>

      <li id="nav_05"><a href="#">商贸</a></li>

      <li id="nav_06"><a href="#">物流</a></li>
</div>

    
    </body>
</html>

------解决方案--------------------
<ul id="tab">
   	<li class="current">1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
   </ul>


function TabEve(){
	//缓存变量
   var $tab_li = $("#tab li");

	$tab_li.each(function(i,n){
		$(n).click(function(){
			$tab_li.removeClass("current");
			$(n).addClass("current");
		})
	})
}

大概是这样

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

当前选中样式如何写

相关资料更多>

推荐阅读更多>