Jquery 点击更换样式
程序员文章站
2022-07-14 22:54:31
...
Jquery 点击更换样式
PS:代码很简单，就直接上代码了。一看就懂了。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<style>
.nav {
width:35px;
height:35px;
line-height: 35px;
text-align: center;
border:1px solid #7B7B7B;
float:left;
}
.content{
width:100;
margin:0 auto;
}
#tip{
width:200px;
}
.m{
background-color: #0066cc;
}
</style>
<body>
<div class ="content">
<div id = "tip">
<div class = "nav">1</div><div class = "nav">2</div><div class = "nav">3</div><div class = "nav">4</div><div class = "nav">5</div>
<button style = "width:65px; height:30px; margin-top: 20px;margin-left: 50px;">提交</button>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".nav").click(function(){
$(this).addClass('m').siblings().removeClass('m');
});
$('button').click(function(){
var val = $('.m').text();
alert(val);
});
});
</script>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 点击更换样式。jquery里面的addClass（）增加class。siblings()
获得匹配集合中每个元素的同胞。removeClass()移除掉该类 。 - addClass(‘a b’) 这里面用空格隔开，是两个类，a 和 b。
上一篇： 循环li点击改变样式
下一篇： Java中金额·元和分的转换