Jquery 点击更换样式

来源：互联网发布：2017年8月份经济数据编辑：程序博客网时间：2024/05/16 00:37

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>

这里写图片描述

点击更换样式。jquery里面的addClass（）增加class。siblings()
获得匹配集合中每个元素的同胞。removeClass()移除掉该类。
addClass(‘a b’) 这里面用空格隔开，是两个类，a 和 b。

阅读全文

0 0