DEMO:Tab切换

<html>

<head>
    <style type="text/css">

    .divtab .tabhead{font-size: 14px;color: #a7a7a7;}

    .divtab .tabhead .tabhead-list{position: relative;top: 3px;height: 27px;margin: 0;padding: 0;border-bottom: 2px solid #f0f0f0;}

    .divtab .tabhead .tabhead-list li{line-height: 21px;display: inline-block;float: left;width: 90px;text-align: center;*zoom: 1;*display: inline;}

    .divtab .tabhead .tabhead-list li.on{color: #e55555;}

    .divtab .tabhead .tabhead-list li:hover{cursor: pointer;}

    .divtab .tabhead .tabhead-list p{position: absolute;top: 27px;width: 90px;height: 2px;margin: 0;background: #e55555;}

    .divtab .tabbody{padding-top: 12px;}

    .divtab .tabbody .tabone{position: relative;display: none;overflow: auto;}

    .divtab .tabbody .tabone.show{display: block;}

    style>
head>

<body>
    <div class="divtab">
        <div class="tabhead">
            <ul class="tabhead-list">
                <li id="atab" class="on">Ali>
                <li id="btab">Bli>
                <li id="ctab">Cli>
                <li id="dtab">Dli>
                <li id="etab">Eli>
                <li id="ftab">Fli>
                <p>p>
            ul>
        div>
        <div class="tabbody">
            <div class="tabone show" id="Acon">AAAAAdiv>
            <div class="tabone" id="Bcon">BBBBBdiv>
            <div class="tabone" id="Ccon">CCCCCdiv>
            <div class="tabone" id="Dcon">DDDDDdiv>
            <div class="tabone" id="Econ">EEEEEdiv>
            <div class="tabone" id="Fcon">FFFFFdiv>
        div>
    div>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js">script>
    <script language="javascript">
    $(function() {
        $('.tabhead-list li').mouseover(function() {
            $(this).css("cursor", "pointer");
        });
        $('.tabhead-list li').click(function() {
            var liindex = $('.tabhead-list li').index(this);
            $(this).addClass('on').siblings().removeClass('on'); //.siblings() 获得匹配集合中每个元素的同胞
            $('.tabbody div.tabone').eq(liindex).fadeIn(150).siblings('div.tabone').hide();
            var liWidth = $('.tabhead-list li').width();
            $('.divtab .tabhead-list p').stop(false, true).animate({
                'left': liindex * liWidth + 'px'
            }, 300);
        });
    });
    script>
body>

html>

 

转载于:https://www.cnblogs.com/Feng-Scorpio/p/6474399.html

你可能感兴趣的:(DEMO:Tab切换)