• 用户注册
  • 用户登录
  • 加入代理
  • 代理中心
  • 帮助中心
  • 香港虚拟bwin必赢手机版登陆

    网站首页 > 帮助中心 > 网站建设知识 > 正文

    怎么用jquery制作出滑动选项卡tab的效果?

    现在网上好多滑动选项卡的代码,但想要找到代码简洁的滑动效果的话,也不是很好找哦,下面给大家说一下:jquery插件调用方法:"#tabs",".tab_con" 这里的#tabs是jquery选项卡的链接按钮的外层ID,.tab_con是要显示的的内容类名。只要注意这两个地方调用就不会错。在一个网页中可以调用多个选项卡效果,而不用过多的代码冗余。
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码简洁的滑动门(tab)jquery插件 - 51网络科技</title>
    <meta name="keywords" content="jquery特效,JS代码,js特效代码大全,导航菜单代码,焦点幻灯片,企业网页设计欣赏" />
    <meta name="description" content="51网络科技专业提供香港免备案bwin必赢手机版登陆、美国免备案bwin必赢手机版登陆、香港服务器、香港vps等网站建设必备的网络材料" />

    <style type="text/css">
    #tabbox{ width:600px; overflow:hidden; margin:0 auto;}
    .tab_conbox{border: 1px solid #999;border-top: none;}
    .tab_con{ display:none;}
    body,ul,li{margin: 0;padding: 0;font: 12px normal "宋体", Arial, Helvetica, sans-serif;list-style: none;}
    a{text-decoration: none;color: #000;font-size: 14px;}
    .tabs{height: 32px;border-bottom:1px solid #999;border-left: 1px solid #999;width: 100%;}
    .tabs li{height:31px;line-height:31px;float:left;border:1px solid #999;border-left:none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;}
    .tabs li a {display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}
    .tabs li a:hover {background: #ccc;}    
    .tabs .thistab,.tabs .thistab a:hover{background: #fff;border-bottom: 1px solid #fff;}

    .tab_con {padding:12px;font-size: 14px; line-height:175%;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        jQuery.jqtab = function(tabtit,tabcon) {
            $(tabcon).hide();
            $(tabtit+" li:first").addClass("thistab").show();
            $(tabcon+":first").show();
        
            $(tabtit+" li").click(function() {
                $(tabtit+" li").removeClass("thistab");
                $(this).addClass("thistab");
                $(tabcon).hide();
                var activeTab = $(this).find("a").attr("tab");
                $("#"+activeTab).fadeIn();
                return false;
            });
            
        };
        /*调用方法如下:*/
        $.jqtab("#tabs",".tab_con");
        
    });
    </script>
    </head>
    <body>
    <div id="tabbox">

        <ul class="tabs" id="tabs">
           <li><a href="http://a-tachikawa.com/il.iunm" tab="tab1">香港bwin必赢手机版登陆</a></li>
           <li><a href="http://a-tachikawa.com/vtb.iunm" tab="tab2">美国bwin必赢手机版登陆</a></li>
           <li><a href="http://a-tachikawa.com/dijob.iunm" tab="tab3">国内bwin必赢手机版登陆</a></li>
           <li><a href="http://a-tachikawa.com/u{.iunm" tab="tab4">防御bwin必赢手机版登陆</a></li>
        </ul>
        <ul class="tab_conbox">
            <li id="tab1" class="tab_con">
               <p><span><a href="http://a-tachikawa.com/">51网络科技</a>为用户提供香港免备案bwin必赢手机版登陆</span></p>
            </li>
               
            <li id="tab2" class="tab_con">
                <p><span><a href="http://a-tachikawa.com/">51网络科技</a>为用户提供美国bwin必赢手机版登陆,也有美国月付免备案bwin必赢手机版登陆</span></p>
            </li>
       
            <li id="tab3" class="tab_con">
                <p><span><a href="http://a-tachikawa.com/">51网络科技</a>为用户提供国内bwin必赢手机版登陆,国内免备案虚拟主机等</span></p>
            </li>
       
            <li id="tab4" class="tab_con">
                <p><span><a href="http://a-tachikawa.com/">51网络科技</a>为用户提供电影bwin必赢手机版登陆、淘宝客bwin必赢手机版登陆等特种bwin必赢手机版登陆</span></p>
            </li>
        </ul>
       
    </div>
    <p>代码简洁的滑动门(tab)jquery插件调用方法:"#tabs",".tab_con" 这里的#tabs是jquery选项卡的链接按钮的外层ID,.tab_con是要显示的的内容类名。只要注意这两个地方调用就不会错。一个页面可以多次使用。
    </p>

     

    </body>
    </html>