jQuery 7 關於css操作

jQuery 7 關於css操作

 

jQuery的css增加修改操作與js的style原理上相同，都是在html文檔中添加style=""屬性。

由於style的優先級大於外部樣式表.css，會優先執行。

 

下面是一個例子

實現功能：

點擊之後border變色，同輩元素保持a:link a:visited a:hover a:active狀態。

HTML代碼：
<div class="buy">
  <ul>
    <li class="size"><a href="####">M</a></li>
    <li class="size"><a href="####">L</a></li>
    <li class="size"><a href="####">XL</a></li>
    <li class="size"><a href="####">XXL</a></li>
    <li class="size"><a href="####">XXXL</a></li>
    <li class="size"><a href="####">4XL</a></li>
    <li class="size"><a href="####">5XL</a></li>
  </ul>
</div>
CSS代碼：
.buy ul{
  list-style-type: none;
  overflow: hidden;
}
 
.buyr ul li{
  float: left;
  font-size: 1em;
}
 
.buy ul li a{
  display: inline-block;
  padding: 4px 5px;
  margin-right: 4px;
}
 
.buy a:link,.buy a:visited{
  border: 2px solid #DDD;
}
.buy a:hover,.buy a:active{
  border: 2px solid #F40;
}
JS代碼：
$(document).ready(function(){
  $(".buy ul li").click(function(){
  $(this).children("a").css("border","2px solid #F40");
  $(this).siblings().each(function(){
    $(this).children("a").removeAttr("style");
  });
});
});