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");
  });
});
});