加载中…jQuery点击改变Class 修改css 样式
(2014-07-23 09:31:09) | 分类： 网站建设 |
有两种方法，都已经经过测试。js网页怎么实现鼠标单击后改变样式并且保留样式，jQuery点击改变Class
修改css 样式。
$(function(){
$(".w1").click(function(){
$(this).removeClass("w1");
$(this).addClass("w2");
$(this).siblings().removeClass("w2");
$(this).siblings().addClass("w1");
});
.sidebar { position:
relative; width: 200px; height: 500px; background: #DDD; border:
1px solid #F00; }
.sidebar > ul {
position: relative; padding: 0; margin: 0; width: 160px;
margin-top: 30px; float: right; right: -1px; }
.sidebar li {
text-align: center; list-style: none; padding: 0; margin: 0; font:
12px/3 "Microsoft YaHei",SimHei; }
.sidebar li>a {
text-decoration: none; color: #333; }
.sidebar .hover {
border: 1px solid #B4B4B4; border-right: none; background: #EEE;
}
$(function(){
$('div.sidebar li').click(function(){
$(this).addClass('hover').siblings('li').removeClass('hover');
})
})
// jQuery方式结束
*/
// 原生Javascript
window.onload=function(){
var obj=document.getElementByIdx_x_x('nav');
var lis=obj.getElementsByTagName_r('li');
obj.onclick=function(event){
var
e=event||window.event;
var
obj=e.srcElement?e.srcElement:e.target;
//
去掉其他LI的hover样式
for(var
i=0, l=lis.length; i < l; i++){
lis[i].className="";
}
switch(obj.tagName){
case 'LI':
obj.className="hover";
break;
case 'A':
obj.parentNode.className="hover";
break;
}
}
}
方法一
});
全部源码（狗日的新浪不能贴源码）：
（jQuery点击改变Class效果图）
-----------------------------------------以下css
------------------------------------
------------------------------------以下javascrpit-------------------------------
全部源码：
| （实际效果：） http://s8/mw690/0021idZHgy6KFjAwucTb7&690修改css （鼠标点击后改变class样式效果图） |
喜欢
0
赠金笔