码迷,mamicode.com
首页 > 其他好文 > 详细

jq tab

时间:2016-05-13 11:28:46      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:

 

<div id="outer">
    <ul id="tab">
        <li class="current">tab标签</li>
        <li>qq在线客服代码</li>
        <li>css3</li>
    </ul>
    <div id="content">
        <ul style="display:block;">
           <a href="http://www.lanrenzhijia.com/tab">tab标签</a>
        </ul>
        <ul>
            <a href="http://www.lanrenzhijia.com/service">qq在线客服代码</a>
        </ul>
        <ul>
           <a href="http://www.lanrenzhijia.com/js/css3">css3</a>
        </ul>
    </div>
</div>
<!-- html代码end -->

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></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>

 

jq tab

标签:

原文地址:http://www.cnblogs.com/fenle/p/5486921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!