jQuery点击改变Class 修改css 样式
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery点击改变Class 修改css 样式相关的知识,希望对你有一定的参考价值。
有4个链接,其中有第1-3个的样式都是class=w1,第4个是class=w2;
当再点击那1-4个中的任意一个链接比如第3个时,此时只有第3个的样式为class=w2,其余的均为class=w1。我写的代码实现不了,请高手指点。
<SCRIPT src="/jquery-1.4.2.min.js" type="text/javascript"></SCRIPT>
<style type="text/css">
.w1 font-size:14px;
.w2 font-size:20px;
</style>
<body>
<ul>
<li class="w1"><a href="/Untitled-1.html" >公司简介</a></li>
<li class="w1"><a href="/Untitled-1.html" >企业文化</a></li>
<li class="w1"><a href="/Untitled-1.html" >发展战略</a></li>
<li class="w1"><a href="/Untitled-1.html" >服务范畴</a></li>
</ul>
</body>
<script type="text/javascript">
$(function()
$('w1').click()
$(this).removeClass('w1');
$(this).addClass('w2');
);
</script>
jQuery中还有一些方法直接返回或者设置元素的CSS属性。
css():
读操作: 获取匹配元素集合中第一个元素的指定样式值(一个或多个)。
注:读取多个样式值的操作是在jQuery v1.9才加入的。
写操作: 为匹配元素集合中的每一个元素设置一个或多个CSS属性的值。
传入的参数可以是单个的键值对,也可以是PlainObject指定的多个值,还可以是function.(v1.4).。
jQuery会处理各个浏览器中不太相同的一些具体情况,比如W3C的cssFloat在IE中是styleFloat,在jQuery中,你可以使用float,然后jQuery会帮你把它翻译成每个浏览器中应该有的正确名称。
还有,jQuery会合理解读CSS和DOM格式的多词属性,比如.css(“background-color”)和.css(“backgroundColor”),它都是可以处理的。 参考技术A
<script language="javascript">
$(document).ready(function()
$(".w1").click(function()
$(this).attr("class" ,"w2").siblings().attr("class" ,"w1");
);
);
</script>
语法出错啊,完全没写好,,jq的写法要像我上面那样写,你复制到你本地测试吧
参考技术B $(this).removeClass('w1');$(this).addClass('w2');
$(this).siblings().removeClass("w2");
$(this).siblings().addClass("w1");提交回答追问
光点击,没反应啊
追答没反应是这个$('w1').click(),要改成$('.w1').click(function(),看清楚小数点!
类要用小数点,Id用#号;
$(function()
$(".w1").click(function()
$(this).removeClass("w1");
$(this).addClass("w2");
$(this).siblings().removeClass("w2");
$(this).siblings().addClass("w1");
);
);
或者你写成一条吧:
$(this).removeClass("w1").addClass("w2").siblings().removeClass("w2").addClass("w1");
另外attr()也可以,你直接上百度attr()就可以看到他的使用了。
百度第一条:
jQuery 属性操作 - attr() 方法
是这样的吗亲,不行啊。
你都是在服务器上面测试的啊?
你试试jquery-1.8.0.min.js版本,1.4.2没用过,还有报错是什么啊?我这边没有问题啊!
亲,你看看,这个是地址呢。http://www.zsgs.net/Untitled-1.html
追答你的链接问题,换成#号测试
公司简介
他刷新页面,所以没有看出效果。
哈哈,好了,多谢了亲。
本回答被提问者采纳 参考技术C 这个有两个方法 一个是$("你要的id").click(fuction()$(this).each(遍历)
首先要移除Class
再是添加Class
//或者是用parent结点找元素
移除
添加
) 参考技术D $(function()
$('.w1').click()
$(this).removeClass('w1').siblings('.w2').removeClass('w2').addClass('w1');
使用jQuery改变HTML元素的CSS样式
<script>
$(document).ready(function()
$("#target1").css("color","red");
);
</script>
<!-- Only change code above this line. -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>
以上是关于jQuery点击改变Class 修改css 样式的主要内容,如果未能解决你的问题,请参考以下文章