日期:2014-05-16  浏览次数:20371 次

js 点击改变样式该怎么写
<div class="page">
<a href="#" class="a0">上一页</a>
<a href="#" class="a1">1</a>
<a href="#" class="a0">2</a>
<a href="#" class="a0">3</a>
<a href="#" class="a0">4</a>
<a href="#" class="a0">下一页</a> 
<span class="s">转到</span> <input type="text" class="ipt">
<a href="#" class="a2">确定</a>
</div>


现在是1的地方class 为a1,我想要实现的效果就是点击2后,2的class变为a1, 1,3,4的变为a0
点击3后,3的class变为a1, 1,2,4的变为a0

这个效果怎么实现,求教,谢谢
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$('.page a:gt(0):lt(4)').click(function(){
$('.page a.a1').each(function(index, element) {
            this.className='a0';
        });;
this.className='a1';
});
})
</script>
<style>

</style>
</head>

<body>
<div class="page">
    <a href="#" class="a0">上一页</a>
    <a href="#" class="a1">1</a>
    <a href="#" class="a0">2</a>
    <a href="#" class="a0">3</a>
    <a href="#" class="a0">4</a>
    <a href="#" class="a0">下一页</a> 
    <span class="s">转到</span> <input type="text" class="ipt">
    <a href="#" class="a2">确定</a>
</div>
</body>
</html>

------解决方案--------------------
选择上一页和下一页之间的4个a标签,点击时设置其他的标签a1的为a0,点击的标签为a1,学习了