前端新手选项卡 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <title>Title</title>
<script src="Bootstrap/js/jquery.min.js"></script>
</head>
<style>
 *{ margin: 0;padding: 0;}
#a{width:350px; height: 350px; background: red; overflow:hidden;}
  ul{ list-style: none;}
  ul li{
   margin:0 5px;
   width: 100px;
   height:40px;
   background: #f7f6ef;
   float: left;
   line-height: 20px;
   text-align: center;
  }
  .at{ background: #000;
   color: #ffffff;}
 .old{clear: both; width: 350px; height:300px; background: #f7bdb4;}
</style>
<body>
<div id="a">
 <div class="list">
   <ul>
     <li class="at">1</li>
     <li>2</li>
     <li>3</li>
   </ul>
 </div>
 <div class="old">1</div>
 <div class="old" style="display:none">2</div>
 <div class="old" style="display:none">3</div>
</div>
<script>
   $(document).ready(function () {
      $("li").each(function (e) {
          $(this).click(function () {
            $("li").removeClass("at");
            $(this).addClass("at");
            $(".old").hide(300);
            $(".old").eq(e).show(300);
          })
      })
   })
</script>
</body>
</html>

 







		

		
posted @ 
2017-11-04 21:30 
赵新峰 
阅读(280) 
评论(1) 
 
收藏 
举报