jq-tab

田
发布于 2021-11-08 11:43:31
4.6K0
发布于 2021-11-08 11:43:31
文章被收录于专栏：IT杂症
<span class="doctype"><!doctype html></span>
<span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>></span>
<span class="tag"><<span class="title">head</span>></span>
    <span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"UTF-8"</span>></span>
    <span class="tag"><<span class="title">title</span>></span>jq tab2<span class="tag"></<span class="title">title</span>></span>
        <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"http://libs.baidu.com/jquery/2.0.0/jquery.js"</span>></span><span class="tag"></<span class="title">script</span>></span>
     <span class="tag"><<span class="title">style</span> <span class="attribute">type</span>=<span class="value">"text/css"</span>></span><span class="css">
<span class="class">.tabbtn</span> <span class="rules">{<span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">42</span>px</span></span>;<span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">1000</span>px</span></span>;<span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#08e</span></span></span>;<span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">0</span> auto</span></span>; <span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">0</span></span></span>; <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">1</span>px solid <span class="hexcolor">#08e</span></span></span>; <span class="rule"><span class="attribute">border-bottom</span>:<span class="value"> none</span></span>; <span class="rule"><span class="attribute">border-top-width</span>:<span class="value"> <span class="number">2</span>px</span></span></span>}
<span class="class">.tabbtn</span> <span class="tag">li</span><span class="rules">{<span class="rule"><span class="attribute">display</span>:<span class="value">block</span></span>;<span class="rule"><span class="attribute">float</span>:<span class="value">left</span></span>;<span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">42</span>px</span></span>;<span class="rule"><span class="attribute">overflow</span>:<span class="value">hidden</span></span>;<span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">0</span> <span class="number">55</span>px</span></span>;<span class="rule"><span class="attribute">text-align</span>:<span class="value">center</span></span>;<span class="rule"><span class="attribute">font</span>:<span class="value"> normal <span class="number">18</span>px/<span class="number">42</span>px <span class="string">'Microsoft Yahei'</span></span></span>;<span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#08e</span></span></span>;<span class="rule"><span class="attribute">color</span>:<span class="value"><span class="hexcolor">#fff</span></span></span>;<span class="rule"><span class="attribute">cursor</span>:<span class="value">pointer</span></span>;<span class="rule">}</span></span>
<span class="class">.tabbtn</span> <span class="tag">li</span><span class="class">.current</span><span class="rules">{<span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#fff</span></span></span>;<span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">42</span>px</span></span>;<span class="rule"><span class="attribute">line-height</span>:<span class="value"><span class="number">40</span>px</span></span>;<span class="rule"><span class="attribute">color</span>:<span class="value"><span class="hexcolor">#08e</span></span></span>;<span class="rule"><span class="attribute">font-weight</span>:<span class="value">normal</span></span>;<span class="rule"><span class="attribute">font-family</span>:<span class="value"><span class="string">'Microsoft Yahei'</span></span></span>;<span class="rule"><span class="attribute">text-decoration</span>:<span class="value">none</span></span>;<span class="rule">}</span></span>
<span class="class">.tabcon</span> <span class="rules">{<span class="rule"><span class="attribute">position</span>:<span class="value">relative</span></span>;<span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">200</span>px</span></span>;<span class="rule"><span class="attribute">overflow</span>:<span class="value">hidden</span></span>;<span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#fff</span></span></span>; <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">1000</span>px</span></span>; <span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">0</span> auto</span></span>; <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">1</span>px solid <span class="hexcolor">#08e</span></span></span>;<span class="rule"><span class="attribute">border-top</span>:<span class="value"> none</span></span>;<span class="rule">}</span></span>
<span class="class">.subbox</span> <span class="rules">{<span class="rule"><span class="attribute">position</span>:<span class="value">absolute</span></span>;<span class="rule"><span class="attribute">left</span>:<span class="value"><span class="number">0</span></span></span>;<span class="rule"><span class="attribute">top</span>:<span class="value"><span class="number">0</span></span></span>;<span class="rule">}</span></span>
<span class="class">.sublist</span> <span class="rules">{<span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">10</span>px</span></span>;<span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">200</span>px</span></span>;<span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#fff</span></span></span>;<span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">980</span>px</span></span>;<span class="rule"><span class="attribute">padding-top</span>:<span class="value"><span class="number">20</span>px</span></span>;<span class="rule">}</span></span>
<span class="class">.sublist</span> <span class="tag">h5</span><span class="rules">{<span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">0</span> <span class="number">0</span> <span class="number">15</span>px <span class="number">0</span></span></span>;<span class="rule">}</span></span>
<span class="class">.sublist</span> <span class="tag">h5</span> <span class="tag">span</span><span class="rules">{<span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">28</span>px</span></span>;<span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#09f</span></span></span>;<span class="rule"><span class="attribute">color</span>:<span class="value"><span class="hexcolor">#fff</span></span></span>;<span class="rule"><span class="attribute">font</span>:<span class="value">normal <span class="number">18</span>px/<span class="number">28</span>px <span class="string">'Microsoft Yahei'</span></span></span>;<span class="rule"><span class="attribute">text-align</span>:<span class="value">center</span></span>;<span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">7</span>px</span></span>;<span class="rule">}</span></span>
<span class="class">.sublist</span> <span class="tag">p</span><span class="rules">{<span class="rule"><span class="attribute">color</span>:<span class="value"><span class="hexcolor">#fff</span></span></span>;<span class="rule"><span class="attribute">font</span>:<span class="value"> normal <span class="number">16</span>px/<span class="number">24</span>px <span class="string">'Microsoft Yahei'</span></span></span>;<span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">1000</span>px</span></span>;<span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">28</span>px</span></span>;<span class="rule"><span class="attribute">color</span>:<span class="value"><span class="hexcolor">#4b2d0e</span></span></span>;<span class="rule">}</span></span>

</span><span class="tag"></<span class="title">style</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>></span><span class="javascript">
    

$(<span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>

    jQuery.jqtab = <span class="function"><span class="keyword">function</span><span class="params">(tabtit, tab_conbox, events)</span> {</span>
        $(tabtit).find(<span class="string">"li"</span>).bind(events, <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
            $(<span class="keyword">this</span>).addClass(<span class="string">"current"</span>).siblings(<span class="string">"li"</span>).removeClass(<span class="string">"current"</span>);
            <span class="keyword">var</span> activeindex = $(tabtit).find(<span class="string">"li"</span>).index(<span class="keyword">this</span>);

            $(tab_conbox).children(<span class="string">"div"</span>).stop(<span class="literal">true</span>,<span class="literal">true</span>).eq(activeindex).fadeIn(<span class="number">300</span>).siblings().hide();
        
            <span class="keyword">return</span> <span class="literal">false</span>;
        });
    };

    $.jqtab(<span class="string">".tabbtn"</span>, <span class="string">".subbox"</span>, <span class="string">"mouseenter"</span>);


});

</span><span class="tag"></<span class="title">script</span>></span>

<span class="tag"></<span class="title">head</span>></span>
<span class="tag"><<span class="title">body</span>></span>

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


<span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span>
本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2014年08月08日，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自作者个人站点/博客前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！
登录后参与评论
0 条评论
热度
jq-tab

jq-tab

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐
