您的位置：首页 > Web前端 > JQuery

jquery实现选项卡

2013-04-01 20:11 295 查看

<html>

<head>

<meta charset="utf-8">

<style>

*{margin:0;padding:0}

   body{font-size:15px;width:300px;margin:5px auto}

   .menu ul li{list-style:none;float:left;width:50px;border:1px solid #ccc;line-height:30px;margin-left:20px;border-bottom:none;text-align:center;cursor:pointer;}

   .content{clear:both;border:1px solid green;height:200px;margin-left:20px;padding-left:10px}

   .hide{display:none}

   .show{background:orange}

   .hover{background:yellow}

</style>

<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>

<script>

$(function(){

     var $li = $("div.menu ul li");

$li.click(function(){

     var $index=$(this).index();

  $("div.content div").eq($index).show().siblings().hide();

  $(this).addClass("show").siblings().removeClass("show");

}).hover(function(){

         $(this).addClass("hover");

},function(){

         $(this).removeClass("hover");

});

});

</script>

<body>

<div>

<div class="menu">

   <ul>

    <li class="show">时事</li>

    <li>娱乐</li>

    <li>体育</li>

   </ul>

</div>

<div class="content">

  <div>时事</div>

  <div class="hide">娱乐</div>

  <div class="hide">体育</div>

<div>

<div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

jquery实现 选项卡

jquery实现选项卡