Jquery 点击更换样式

最新推荐文章于 2023-10-07 23:55:20 发布

原创最新推荐文章于 2023-10-07 23:55:20 发布 · 7.5k 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了使用jQuery实现点击元素时更换样式的简单方法，包括使用`addClass()`添加类、`siblings()`选择同胞元素以及`removeClass()`移除类的功能。作者分享了基础的代码示例，便于初学者理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>