添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 建站教程 > JavaScript教程 >

jQuery点击添加样式,点击空白处移除样式

时间:2014-09-18      来源:互联网     

jQuery中如何点击添加样式,然后在空白处点击再移除样式?下面来写一个点击文字元素添加颜色,然后点击网页空白处颜色消失实例。

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>科e互联-web前端学习教程</title>
<script language="javascript" type="text/javascript" src="http://www.internetke.com/public/js/jquery.js"></script>
<script>
  $(document).ready(function(){ 
  $('.test ul li').click(function(){
  $(this).addClass('click');
  });
  $('html').mousedown(function(){
  $('.test ul li').removeClass('click');
  });
  });
</script>
<style>
  ul,li { list-style:none; }
  .test ul li { float:left; display:block; width:100px; height:100px; line-height:100px; margin-right:20px; border:1px dotted #eee; text-align:center; }
  .test ul li:hover { background:#eee; }
  .test ul li.click { background:#333; }
</style>
</head>
<body>
  <div class="test">
  <ul>
  <li>File Name A</li>
  <li>File Name B</li>
  <li>File Name C</li>
  <li>File Name D</li>
  <li>File Name E</li>
  <li>File Name F</li>
  </ul>
  </div>
</body>
</html>
相关文章

大家都在看

最新更新