yquery-操作樣式屬性
阿新 • • 發佈：2017-10-31
logs poi -a round 其他 padding add huang 返回
前幾天回家，參加了全國的成人高考，都說學歷是找工作的敲門磚，其實一點都不假，尤其是現在的社會競爭力那麽強，你不學就會被淘汰。像要過自己想要的生活，就必須努力學習，努力賺錢，買自己想買的，過自己想過的。
廢話不多說，學習今天的知識點。jq操作樣式。
樣式屬性操作css 操作css改變樣式方法<script>
//方法1 css({json})
$f(unction(){
$("div").css({"width":100,"height":100, "background":"red"})
})
//第二種方法
$(window).ready(function(){
$(
添加類 刪除類 判名 返回值（true false）
$(function(){ $("button:eq(0)").click(function(){ //添加類名 $("div").addClass("current"); //判斷類名 alert($("div").hasClass("current")) }); $("button:eq(1)").click(function(){ //刪除類名 $("div").removeClass("current"); //判斷類名 alert($("div").hasClass("current")) }) }) </script>
切換類 沒有類添加類，有類刪除類
$("div").toggleClass("current")案例 切換背景
<script> $(function(){ $("button").click(function(){ if($("div").hasClass("current")===true){ $("div").removeClass("current") }else{ $("div").addClass("current") } }) }) </script>
淘寶top欄
<style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrapper {width: 1000px;height: 475px;margin: 0 auto;margin-top: 100px;} .tab {border: 1px solid #ddd;border-bottom: 0;height: 36px;width: 320px;} .tab li {position: relative;float: left;width: 80px; height: 34px; line-height: 34px; text-align: center; cursor: pointer; border-top: 4px solid #fff; } .tab span {position: absolute;right: 0;top: 10px;background: #ddd;width: 1px;height: 14px;overflow: hidden;} .products {width: 1002px;border: 1px solid #ddd;height: 476px;} .products .main { float: left; display: none; } .products .main.selected {display: block; } .tab li.active {border-color: red;border-bottom: 0; } </style> <script src="../jquery-1.11.1.min.js"></script> <script> jQuery(window).ready(function(){ //鼠標放到LI上，對應的LI添加類，其他LI刪除類 //下面對應的DIV添加類，其他的刪除類 $(".tab>li").click(function(){ $(this).addClass("active").siblings("li").removeClass("active"); $(".products>.main").eq($(this).index()).addClass("selected").siblings(".main").removeClass("selected") }) }) </script> </head> <body> <div class="wrapper"> <ul class="tab"> <li class="tab-item active">國際大牌<span>◆</span></li> <li class="tab-item">國妝名牌<span>◆</span></li> <li class="tab-item">清潔用品<span>◆</span></li> <li class="tab-item">男士精品</li> </ul> <div class="products"> <div class="main selected"> <a href="###"><img src="../image/guojidapai.jpg" alt=""/></a> </div> <div class="main"> <a href="###"><img src="../image/guozhuangmingpin.jpg" alt=""/></a> </div> <div class="main"> <a href="###"><img src="../image/qingjieyongpin.jpg" alt=""/></a> </div> <div class="main"> <a href="###"><img src="../image/nanshijingpin.jpg" alt=""/></a> </div> </div> </div>
yquery-操作樣式屬性