jquery 类似反选效果
<style><!--
.nav{position: fixed;top: 140px;right: 0;margin-top: -200px;width: 125px;}
.nav-head{position: relative;top: 70px;width: 119px;height: 78px;background: url('../images/nav_03.png') no-repeat center;}
.nav-body{float: right;margin-right: 7px;margin-top: 50px;width: 100px;background-color: #5713cd;}
.nav-list{margin-top: 23px;width: 100px;height: 382px;}
.nav-item{display: block;margin: 0 10px;height: 30px;margin-bottom: 8px;background-color: #702be7;text-align: center;color: #fff;font-size: 13px;line-height: 30px;text-decoration: none;}
.nav-item:hover{color:#fbe06d;text-decoration: none;}
.nav-active{color:#fbe06d;background-color: #451696;}
--></style>
<p> </p>
<p><script type="text/javascript">// <![CDATA[<br />$('.nav-list a').click(function(e){<br /> var target = $(this),<br /> index = target.attr('class').substr(3);<br /> target.attr('class','nav'+index+" "+'nav-active').siblings().removeClass('nav-active');<br /> });<br />// ]]></script></p>
<div class="nav">
<div class="nav-head"> </div>
<div class="nav-body">
<div class="nav-list"><a class="nav1 nav-item" href="#nav1">神券省大钱</a> <a class="nav2 nav-item" href="#nav2">暴力直降</a> <a class="nav3 nav-item" href="#nav3">0毛利疯抢</a> <a class="nav4 nav-item" href="#nav4">稀缺新品</a> <a class="nav5 nav-item" href="#nav5">大牌比价</a> <a class="nav6 nav-item" href="#nav6">爆品推荐</a> <a class="nav7 nav-item" href="#nav7">优选套餐</a> <a class="nav8 nav-item" href="#nav8">强币专区</a> <a class="nav9 nav-item" href="#nav9">满额立减</a> <a class="nav10 nav-item" href="#">TOP</a></div>
<script type="text/javascript">// <![CDATA[
$('.nav-list a').click(function(e){
var target = $(this),
index = target.attr('class').substr(3);
target.attr('class','nav'+index+" "+'nav-active').siblings().removeClass('nav-active');
});
// ]]></script>
