日期:2014-05-18  浏览次数:20684 次

如何控制class 的选择
网站的首页 导航文件 里面有2个class classA classB

当打开时候 第一个按钮是 classA 其它的几个按钮都是classB 
当打开第二个按钮连接的时候 第二个按钮是classA 其它的都是 classB  

请问如何来控制呢 ?
例如
http://www.360buy.com/index.asp 京东商城 上面 那个导航那个东西一样!

请教了!

------解决方案--------------------
那你是服务端的语言撒
比如JSP

<... if(..) class="classA" else class="classB" end ...>
<... if(..) class="classA" else class="classB" end ...>
<... if(..) class="classA" else class="classB" end ...>
<... if(..) class="classA" else class="classB" end ...>
每一个链接都这么写,不久搞定了撒。
------解决方案--------------------
js
------解决方案--------------------
HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style type="text/css"> 
<!-- 
body {    
    margin:0;     
    padding:0;     
    font: bold 11px/1.5em Verdana; 
} 
img {     
    border: none; 
}  
/*- Menu Tabs 1--------------------------- */
#tabs1 {     
    float:left;     
    width:100%;     
    background:#F4F7FB;     
    font-size:93%;     
    line-height:normal;     
    border-bottom:1px solid #BCD2E6;
} 
#tabs1 ul {     
    margin:0;     
    padding:10px 10px 0 50px;     
    list-style:none;
} 
#tabs1 li {     
    display:inline;     
    margin:0;     
    padding:0; 
} 
#tabs1 a {     
    float:left;     
    background:url("tableft1.gif") no-repeat left top;     
    margin:0;     padding:0 0 0 4px;     
    text-decoration:none; 
} 
#tabs1 a span {     
    float:left;     
    display:block;    
    background:url("tabright1.gif") no-repeat right top;     
    padding:5px 15px 4px 6px;     
    color:#627EB7; 
} 
/* Commented Backslash Hack hides rule from IE5-Mac \*/ 
#tabs1 a span {
    float:none;
} 
/* End IE5-Mac hack */ 
#tabs a:hover span {     
    color:#627EB7; 
} 
#tabs1 a:hover {     
    background-position:0% -42px; 
} 
#tabs1 a:hover span {    
    background-position:100% -42px; 
} 
#tabs1 #current a {     
    background-position:0% -42px; 
} 
#tabs1 #current a span {    
    background-position:100% -42px; 
} 
--> 
</style> 
<BODY>
<div id="tabs1">     
    <ul>
        <li id="current"><a href="#" onClick="selectCurrent(this);"><span>Home</span></a></li>         
        <li><a href="#" onClick="selectCurrent(this);"><span>Products</span></a></li>         
        <li><a href="#" onClick="selectCurrent(this);"><span>Services</span></a></li>         
        <li><a href="#" onClick="selectCurrent(this);"><span>Support</span></a></li>         
        <li><a href="#" onClick="selectCurrent(this);"><span>Order</span></a></li>         
        <li><a href="#" onClick="selectCurrent(this);"><span>News</span></a></li>         
        <li><a href="#" onClick="selectCurrent(this);"><span>About</span></a></li>     
    </ul>
</div>
</BODY>
</HTML>
<script>
var previous=document.getElementById("current");
function selectC