jQuery? CSS? ?????
CSS ??? ??
??? ???? ????? ??? CSS ???? ????? ??? ???? ?? ??? ? ????.
??? ?? CSS ???? ??? ? ??? ????? DOM ????? ?? ?? ???? ??? ???? ?????. ??? ?? JavaScript ???? ??? ?? ??? ????? ????? ???? ?? ???? ????.
jQuery? ???? ??? ??? ????.
1. CSS ??? ??
?? ?? CSS ??? ??? ??? jQuery ??????.
? ???? ???? ? ?? ???? ?? ????? ??? CSS ???? ??? ? ????. ???? ???? ?? ?????.
addClass(class) ? RemoveClass(classes)? ????? ?? CSS ????? ???? ???? ? ?? ??? ? ????. ?:
$("#btnAdd").bind("click", function(event) {
$("p").addClass("colorRed borderBlue");
});
removeClass ???? ????? ???????. ????? ???? ??? ?? CSS ???? ?????. :
$("p") .removeClass();
2. CSS ??? ??
????? ??? ?? CSS ???? ????? ??, ? ?? ??? ?????. style", jQuery? ?? ???? ?????:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>使用jQ控制CSS</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
.w1{font-size: 14px;}
.w2{font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li class="w1"><a href="#">公司簡(jiǎn)介</a> </li>
<li class="w1"><a href="#">公司文化</a> </li>
<li class="w1"><a href="#">發(fā)展戰(zhàn)略</a> </li>
<li class="w1"><a href="#">公司簡(jiǎn)介</a> </li>
</ul>
</body>
<script type="text/javascript">
$(function () {
$( ".w1").click(function () {
$(this).removeClass("w1");
$(this).addClass("w2");
$(this).siblings().removeClass("w2");
$(this).siblings().addClass("w1");
});
});
</script>
</html>
