jquery制作选项卡

来源：互联网发布：金融工程硕士就业知乎编辑：程序博客网时间：2024/06/08 11:41
jquery制作选项卡<html><head><!--这是js代码--><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type="text/javascript">//引入jquery库文件 $(function(){$('#tabin >ul >li').each(function(index){        $(this).mouseover(function(){            var liNode=$(this);            timeOutId=setTimeout(function(){                $('div.current').removeClass('current');                $('li.tabin').removeClass('tabin');                $('#tabin > div').eq(index).addClass('current');                liNode.addClass('tabin');            },200);//使用200毫秒的延迟        }).mouseout(function(){            clearTimeout(timeOutId);        })    })}); </script><!--以下是css代码--><style type="text/css">ul, li { list-style:none; padding:0px; margin:0px; }div, li { font-size:12px; }div#tabin { width:210px; }div#tabin li { background:#CCC; display:block; float:left; padding:4px 8px; color:#000; margin-right:3px; border:1px solid #CCC; }div#tabin li a { cursor:pointer; }div#tabin div { clear:left; background-color:#6CF; color:#FFF; padding:8px; line-height:22px; display:none; }div#tabin li.tabin { background:#FFCB4B; border:1px solid #6E6E6E; }div#tabin div.current { display:block; }</style><title>jquery选项卡</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><div id="tabin">  <ul>    <li class="tabin"><a>客户留言</a></li>    <li><a>意见投诉</a></li>    <li><a>联系我们</a></li>  </ul>  <div class="current">客户留言内容</div>  <div>意见投诉内容</div>  <div>联系我们内容</div></div></body></html>效果：