jq-tab

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq tab2</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
     <style type="text/css">
.tabbtn {height:42px;width:1000px;background:#08e;margin:0 auto; padding: 0; border: 1px solid #08e; border-bottom: none; border-top-width: 2px}
.tabbtn li{display:block;float:left;height:42px;overflow:hidden;padding:0 55px;text-align:center;font: normal 18px/42px 'Microsoft Yahei';background:#08e;color:#fff;cursor:pointer;}
.tabbtn li.current{background:#fff;height:42px;line-height:40px;color:#08e;font-weight:normal;font-family:'Microsoft Yahei';text-decoration:none;}
.tabcon {position:relative;height:200px;overflow:hidden;background:#fff; width: 1000px; margin: 0 auto; border: 1px solid #08e;border-top: none;}
.subbox {position:absolute;left:0;top:0;}
.sublist {padding:10px;height:200px;background:#fff;width:980px;padding-top:20px;}
.sublist h5{margin:0 0 15px 0;}
.sublist h5 span{height:28px;background:#09f;color:#fff;font:normal 18px/28px 'Microsoft Yahei';text-align:center;padding:7px;}
.sublist p{color:#fff;font: normal 16px/24px 'Microsoft Yahei';width:1000px;height:28px;color:#4b2d0e;}

</style>
<script type="text/javascript">
    

$(function() {

    jQuery.jqtab = function(tabtit, tab_conbox, events) {
        $(tabtit).find("li").bind(events, function() {
            $(this).addClass("current").siblings("li").removeClass("current");
            var activeindex = $(tabtit).find("li").index(this);

            $(tab_conbox).children("div").stop(true,true).eq(activeindex).fadeIn(300).siblings().hide();
        
            return false;
        });
    };

    $.jqtab(".tabbtn", ".subbox", "mouseenter");


});

</script>

</head>
<body>

<ul class="tabbtn">
          <li class="current">云南</li>
            <li>大理</li>
            <li>曲靖</li>
    
 
      </ul>
      <div class="tabcon" id="leftcon">
        <div class="subbox">
            <div class="sublist">
                <h5><span>中公教育云南总部</span></h5>
                <p>地址:昆明市五一路46号国防大厦写字楼一、二层</p>
                <p>电话:0871-66310888、65386878、18988415411、18987130422、18088294809</p>
            </div>
            <div class="sublist">
                <h5><span>大理分校</span></h5>
                <p>地址:大理市下关人民街1号下关宾馆四楼(人民公园对面)</p>
                <p>电话:0872 - 2310798、2310618、13324945671</p>
            </div>
            <div class="sublist">
                <h5><span>曲靖分校</span></h5>
                <p>地址:曲靖市麒麟南路220号康桥医药公司院内五楼(珠江源广场南侧)</p>
                <p>电话:0874-3118002、3117002、15334436619</p>
            </div>
        </div>
    </div>


</body>
</html>
最后修改于:2016年11月11日 10:04