JQuery选项卡淡入淡出代码

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery滑动门</title>
<style type="text/css">
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;}

#tabbox{
    width:607px;
    overflow:hidden;
    margin:0 auto;
}
.tab_conbox{
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
}
.tab_con{
    display:none;
}

.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;
    background: #e0e0e0;
    overflow: hidden;
    width: 100px;
    text-align: center;
}
.tabs li a {
    display: block;
    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"></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="#" tab="tab1">导航菜单</a></li>
       <li><a href="#" tab="tab2">焦点幻灯片</a></li>
      <li><a href="#" tab="tab3">广告代码</a></li>
      <li><a href="#" tab="tab4">网页特效</a></li>
      <li><a href="#" tab="tab5">Yuuk</a></li>
      <li><a href="#" tab="tab6">破洛洛</a></li>
    </ul>
    <ul class="tab_conbox">
        <li id="tab1" class="tab_con">
           <p>Yuuk说破洛洛是一个很好的网站</p>
        </li>
            
        <li id="tab2" class="tab_con">
            <p><a href="http://www.yuukstudio.com" target="_blank"><a href="http://www.yuukstudio.com" target="_blank"><a href="http://www.yuukstudio.com" target="_blank"><a href="http://www.yuukstudio.com" target="_blank">www.yuukstudio.com</a></a></a></a></p>
        </li>
    
        <li id="tab3" class="tab_con">
            <p><a href="http://www.whgglb.com">武汉市区国光劳保</a>成立于2006年，公司目前主要以生产劳保帆布手套为主，工作服，披风，口罩为辅的一家劳保企业，公司位于湖北省武汉市蔡甸区"帆布手套之镇"的索河镇，公司厂房面积达1500多平方米，公司生产的产品经检验人员严格把关，形成完善的管理和质检制度,本公司始终坚持质量第一、信誉第一、以诚待客的服务宗旨，以严谨的管理、高质的标准、合适的产品价格而深受国内外客商的赞誉，本公司生产劳保用品以武汉为中心，远销全国各地，并随时随地满足各客户的服务要求，为客户提供全程详细的产品咨询，技术支持和周到的售后服务。我公司热情欢迎各位新老客户来电订购或来样定做，愿与新老客携手双赢，共创更美好和谐的明天！</p>
        </li>
    
        <li id="tab4" class="tab_con">
            <p>我是yuuk我是yuuk我是yuuk</p>
        </li>
        
        <li id="tab5" class="tab_con">
            <p>我是yuuk我是yuuk我是yuuk我是yuuk我是yuuk我是yuuk</p>
        </li>
        
        <li id="tab6" class="tab_con">
            <p>我是yuuk我是yuuk我是yuuk我是yuuk我是yuuk我是yuuk我是yuuk我是yuuk我是yuuk</p>
        </li>
    </ul>
    
</div>
</body>
</html>

 

 

 

posted @ 2013-01-05 09:01  赵小磊  阅读(382)  评论(0)    收藏  举报
回到头部