点击改变CSS样式

原创 乐之屋  2018-02-28 11:53:37  阅读 120 次 评论 0 条

点击改变CSS样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta name="applicable-device" content="pc,mobile">
<link href="/favicon.ico" type="image/x-icon" rel="icon">
<title>点击改变CSS样式</title>

<script src="images/jquery-1.4.4.min.js"></script>
<style>
.topnav{
background:#339900;
color: #ffffff;
}
</style>

<div id="vlink_1" ><ul>
  <li><a id="id5"  href="javascript:void(0)"  target="_self">乐之屋</a></li>
  <li><a id="id6"  href="javascript:void(0)"  target="_self">乐之屋博客</a></li>
  <li><a id="id5"  href="javascript:void(0)"  target="_self">镖门</a></li>
  <li><a id="id6"  href="javascript:void(0)"  target="_self">妖猫传</a></li>
  </ul>
</div>


<script>
$(function(){
var cotrs =$("#vlink_1 li a");
cotrs.click(function(){
cotrs.removeAttr("style");
$(this).attr("style","background:#e15782;color: #ffffff;");
                return false;
});
});
</script>

<p>方法二</p>
<div id="vlink_2" ><ul>
  <li><a id="id5"  href="javascript:void(0)"  target="_self">乐之屋</a></li>
  <li><a id="id6"  href="javascript:void(0)"  target="_self">乐之屋博客</a></li>
  <li><a id="id5"  href="javascript:void(0)"  target="_self">镖门</a></li>
  <li><a id="id6"  href="javascript:void(0)"  target="_self">妖猫传</a></li>
  </ul>
</div>

<script>
$(function(){
var cotrs =$("#vlink_2 li a");
cotrs.click(function(){
cotrs.removeClass("topnav"); 
$(this).addClass("topnav");
                return false;
});
});
</script>


</body>
</html>


本文地址:http://5devip.com/?id=31
版权声明:本文为原创文章,版权归 乐之屋 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?