这样的效果如何实现?

多写几个CSS，当点击时替换CSS

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

不太明白.我要一个方法,当点不同的连接时动态设置CSS的width
<html>
<head>
<style>
.bor{
width:50
}
</style>
<script>
function changeCss(obj)
{
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];
oRule.style.width=obj*10;
}
</script>
</head>
<body>
<a href="#" onclick="changeCss(this.innerText)">1 </a>
<a href="#" onclick="changeCss(this.innerText)">2 </a>
<a href="#" onclick="changeCss(this.innerText)">3 </a>
<a href="#" onclick="changeCss(this.innerText)">4 </a>
<a href="#" onclick="changeCss(this.innerText)">5 </a> <input class="bor" />
</body>
</html>
<style>
.bor1{
width:10
}
.bor2{
width:20
}
.bor3{
width:30
}
.bor4{
width:40
}
.bor5{
width:50
}
</style>
<a href="#" onclick="this.className='bor1';">1 </a>
<a href="#" onclick="this.className='bor2';">2 </a>
<a href="#" onclick="this.className='bor3';">3 </a>
<a href="#" onclick="this.className='bor4';">4 </a>
<a href="#" onclick="this.className='bor5';">5 </a>
谢谢楼上.但得到的效果不对...
我的代码是下面这样的.也就是用width的宽度来固定住点击后的效果.CSS:
.star-rating li.current-rating{
background: url(star_rating2.gif) left bottom;
position: absolute;
width:150px;/*30是显示1颗星,60是2颗...*/
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
js:
function changeCss(obj)
{
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];
oRule.style.width=obj*30;
}
html:
<a href="#" onclick="changeCss(this.innerText)">1 </a>
<a href="#" onclick="changeCss(this.innerText)">2 </a>
<a href="#" onclick="changeCss(this.innerText)">3 </a>
<a href="#" onclick="changeCss(this.innerText)">4 </a>
<a href="#" onclick="changeCss(this.innerText)">5 </a>
<input class="bor" />
没听懂，不知什么星不星的，我只是写个例子，
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];
都是取的第一个style的第一个规则，你应该根据实际需要改的，不行，把代码发过来看吧，我发消息给你了，在帖子上沟通太慢
我还是把全部CSS贴出来吧
<style type="text/css">
.star-rating{
list-style:none;
margin: 0px;
padding:0px;
width: 150px;
height: 30px;
position: relative;
background: url(star_rating2.gif) top left repeat-x;
}
.star-rating li{
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}
.star-rating li a{
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover{
background: url(star_rating2.gif) left center;
z-index: 2;
left: 0px;
}
.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:30px;
}
.star-rating a.two-stars{
left:30px;
}
.star-rating a.two-stars:hover{
width: 60px;
}
.star-rating a.three-stars{
left: 60px;
}
.star-rating a.three-stars:hover{
width: 90px;
}
.star-rating a.four-stars{
left: 90px;
}
.star-rating a.four-stars:hover{
width: 120px;
}
.star-rating a.five-stars{
left: 120px;
}
.star-rating a.five-stars:hover{
width: 150px;
}
.star-rating li.current-rating{
background: url(star_rating2.gif) left bottom;
position: absolute;
width:30px;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
</style>
你要设谁的宽度呀，你开始说要css那的值动态改
但现在看你的意思是，点哪个链接，哪个链接的宽度相应变化，是这个意思吗？你不能把功能描述的清楚吗？
呵呵，当然了，这样也好，我可以多水几帖了
我给你发的消息发不全,还是贴代码吧...
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>评分</title>
<style type="text/css">
.star-rating{
list-style:none;
margin: 0px;
padding:0px;
width: 150px;
height: 30px;
position: relative;
background: url(star_rating2.gif) top left repeat-x;
}
.star-rating li{
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}
.star-rating li a{
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover{
background: url(star_rating2.gif) left center;
z-index: 2;
left: 0px;
}
.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:30px;
}
.star-rating a.two-stars{
left:30px;
}
.star-rating a.two-stars:hover{
width: 60px;
}
.star-rating a.three-stars{
left: 60px;
}
.star-rating a.three-stars:hover{
width: 90px;
}
.star-rating a.four-stars{
left: 90px;
}
.star-rating a.four-stars:hover{
width: 120px;
}
.star-rating a.five-stars{
left: 120px;
}
.star-rating a.five-stars:hover{
width: 150px;
}
.star-rating li.current-rating{
background: url(star_rating2.gif) left bottom;
position: absolute;
width:0px;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
</style><script type="text/javascript">
  function setValue(theValue){
    document.getElementById("Text1").value = theValue;
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul class="star-rating">
    <li class="current-rating">Currently 0/5 Stars.</li>
    <li><a href="#" title="1 star out of 5" class="one-star" onclick="setValue(this.innerHTML);">1</a></li>
    <li><a href="#" title="2 stars out of 5" class="two-stars" onclick="setValue(this.innerHTML);">2</a></li>
    <li><a href="#" title="3 stars out of 5" class="three-stars" onclick="setValue(this.innerHTML);">3</a></li>
    <li><a href="#" title="4 stars out of 5" class="four-stars" onclick="setValue(this.innerHTML);">4</a></li>
    <li><a href="#" title="5 stars out of 5" class="five-stars" onclick="setValue(this.innerHTML);">5</a></li>
    </ul>
        <input id="Text1" type="hidden" runat="server" maxlength="1" readonly="readOnly" size="1" />
    </div>
    </form>
</body>
</html>上面就是全部代码了
图片地址:http://www.jscode.cn/JsCode/images/star_rating2.gif
其中CSS里面的.star-rating li.current-rating的第三个属性width可以控制显示的星级效果.30=1星,60=2星....
我要实现点击连接1可以把width设置为30px...也就是上面已经写好的代码不能固定住点击的效果，我想通过动态设置width来控制住点击后的效果...