jquery 点击增加样式,点击移除样式,代码如下:
成都创新互联公司服务项目包括隆化网站建设、隆化网站制作、隆化网页制作以及隆化网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,隆化网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到隆化省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
$("li").click(function(){
$(this).toggleClass("enable");
$(this).siblings().removeClass("enable");
})
扩展资料
如果用户单击某个按钮时,要删除class的某个值,那么可以使用与addClass()方法相反的removeClass()方法来完成,它的作用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的JQuery代码来删除p元素中值为“high”的class:
$("p").removeClass("high");
//移除p元素中值为"high"的class
参考资料:百度百科 jQuery
百度百科 样式 (计算机术语)
首先需要获取到文本框元素,然后通过Jquerycss操作方法修改样式。
Jquery可以根据标签名、id、类等很多方式选取元素。
ID选择器
# 选取带有唯一的指定 id 的元素。id 引用 HTML 元素的 id 属性。相同的 id 值只能在文档中使用一次。
类选择器
. 选择器选取带有指定 class 的元素。class 引用 HTML 元素的 class 属性。与 id 选择器不同,class 选择器常用于多个元素。这样就可以为带有相同 class 的任何 HTML 元素设置特定的样式
标签名选择器
element 选择器选取带有指定标签名的元素。标签名引用 HTML 标签的 与 之间的文本。
如题根据文本框的样式选择标签,我们可以通过以下代码实现。
\\比如文本框的class="text1",则通过类选择器选取。即:
$(".text1")
Jquery修改样式的方法有css,addClass,removeClass等方法.
例如如修改文本框的class="text1"的样式我们可以通过Css方法这样实现:
$(".text1").css({width:"70px",height:"20px",border:"1px solide gray"});
也可通过直接给该元素新增一个样式达到修改效果:
\*我们有一个text2的样式*\
.text2{
width:70px;height:20px;border:1px solide gray;
}
\\然后我们直接添加这个class
$(".text1").addClass("text2");
\\如担心之前已有样式和新增样式冲突,我们可以在添加的同时移除新样式。
$(".text1").addClass("text2").removeClass("text1");
1、首先打开hbuilder编辑器,在html文件中写入5个li标签,第一个li标签设置class样式,再在上方设置li标签的高度、宽度、字体大小、行高的等属性,再设置第一个li标签的样式,给它加一个外边框。
2、然后在下方先引入jQuery的库文件,在script标签中先用$选择器得到li标签的dom对象并给li标签设置一个点击事件,当点击li标签的时候,先调用siblings方法找到同级的li标签去除设置的css样式,然后在给点击的li标签添加样式就可以了。
3、最后打开浏览器,可以看到并排的5个li标签,第一个li标签是有红色边框的。
4、当点击其他的li标签的时候,原来的li标签的边框就没有样式了,点击后的li标签会增加红色边框。
这个用jQuery实现一般是添加一个类和删除一个类。
首先要有一个写好的class样式类。通过下面这个代码实现:
var obj2 = $("div"); // 改变样式的对象
obj2.addClass("className"); // 添加样式,className为已经存在一个class名字
obj2.removeClass("className"); // 删除样式
切换样式
JQuery中有一个方法toggle(),JQuery代码如下:
1 toggleBtn.toggle(function(){
2 //元素显示 代码③
3 }, function(){
4 //元素隐藏 代码④
5 })
toggle()方法此处的作用是交替执行代码③和代码④两个函数,如果元素原来是显示的,则隐藏它:如果元素原来是隐藏的,则显示它。此时,toggle()方法主要是控制行为上的重复切换。
另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。例如对p元素进行toggleClass()方法操作。
1 $("p").toggleClass("another"); //重复切换类名“another”
当不断单击“切换样式”按钮时,p元素的class的值就会在“myClass”和“myClass another”之间重复切换。
不存是jquery样式这么一说,其实就是通过js来动态设置css,而通常我们说的css样式则是静态的。如果真要说什么区别,那就是css样式是页面一开始就有的,而jquery动态设置的样式则可以在页面运行的时候随时改变。