您的位置: 首页 > IT文章 > tab切换

tab切换

分类: IT文章 • 2022-03-31 12:51:48

tab切换

<style>
*{ margin:0; padding:0;list-style: none;}
body {font:12px/1.5 Tahoma;}
#outer {450px;margin:150px auto;}
#tab {overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
#tab li {float:left;color:#fff;height:30px;   cursor:pointer;   line-height:30px;padding:0 20px;}
#tab li.current {color:#000;background:#ccc;}
#content {border:1px solid #000;border-top-0;}
#content ul {line-height:25px;display:none;   margin:0 30px;padding:10px 0;}
</style>
</head>

<body>

<div ></script>
<script>
   $(function(){
       window.onload = function()
       {
           var $li = $('#tab li');
           var $ul = $('#content ul');

           $li.mouseover(function(){
               var $this = $(this);
               var $t = $this.index();
               $li.removeClass();
               $this.addClass('current');
               $ul.css('display','none');
               $ul.eq($t).css('display','block');
           })
       }
   });
</script>