Top

Tab内容的动态切换之HTML5篇

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Switch_Tab</title>
    <style type="text/css">
        html,body { font:12px; font-family: "microsoft yahei";}
        div, a { margin:0; padding: 0;}
        .body { width: 100%; height: auto;  }
        .tab { width: 100%; height: 47px; border-left: solid gray 1px; border-right: solid gray 1px;}
        .main { width: 981px; height: 450px; margin: 0 auto;  overflow: hidden;  position:relative; }
        .tab { width: 100%; height: 47px; border-left: solid gray 1px;}
        .tab a { display: block;  float: left; padding-top: 13px; height: 100%; padding-left: 14.5px; padding-right: 14.5px;  border: solid gray 1px; border-left: none;  width: 110px;
        text-align: center; height: 32px; /* line-height: 1; */ color: black; background: #fff; text-decoration: none; }
        .tab a:hover , a.active{ color: orange; padding-top: 10px;  border-top: 3px solid #1ab2e8; height: 33px;  }
        .tab-content {  height: 400px;  font-weight: 700; color: white; width:100%; position: absolute; left: 0; top: 47px; border:solid gray 1px; }
        .tab_content_left { float: left; width: 420px; height: 400px; background-color: #1ab2e8; margin-right: 1px; }
        .tab_content_right { float: right; width: 559px;  height: 400px; background-color: #1cb2e8; }
        .hide { opacity: 0; }
    </style>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".main .tab").find("a").eq(0).addClass('active');
            $(".main .tab-content").eq(0).css({
                opacity:1
            }).find(".tab_content_right").css({
                marginRight:0
            });
            $(".tab a").each(function(index){
                $(this).on('click', function(event){
                    event.preventDefault();
                    var $that = $(this), $parent = $that.parent();
                    if(!$that.hasClass('active')){
                        $parent.find('a').removeClass('active');
                        $that.addClass('active');
                        $('.main .tab-content').stop().animate({opacity:0}, 300, function(){
                            $(this).find('.tab_content_right').css({
                                marginRight: '-559px',
                                opacity: 0
                            });
                        }).eq(index).animate({opacity:1}, 300, function(){
                            $(this).find('.tab_content_right').animate({
                                marginRight: 0,
                                opacity: 1
                            }, 300);
                        });
                    }
                })
            });
        });
    </script>
</head>
<body>
    <div class="body">
       <div class="main">
               <div class="tab">
                   <a href="#none">AA</a>
                   <a href="#none">BB</a>
                   <a href="#none">CC</a>
                   <a href="#none">DD</a>
                   <a href="#none">EE</a>
                   <a href="#none">FF</a>
                   <a href="#none">HH</a>
               </div>
               <div class="tab-content">
                   <div class="tab_content_left">Tab_Content_Left</div>
                   <div class="tab_content_right">Tab_Content_Right</div>
               </div>

               <div class="tab-content">
                   <div class="tab_content_left">Tab_Content_Left</div>
                   <div class="tab_content_right">Tab_Content_Right</div>
               </div>


               <div class="tab-content">
                   <div class="tab_content_left">Tab_Content_Left</div>
                   <div class="tab_content_right">Tab_Content_Right</div>
               </div>
               <div class="tab-content">
                   <div class="tab_content_left">Tab_Content_Left</div>
                   <div class="tab_content_right">Tab_Content_Right</div>
               </div>
               <div class="tab-content">
                   <div class="tab_content_left">Tab_Content_Left</div>
                   <div class="tab_content_right">Tab_Content_Right</div>
               </div>
               <div class="tab-content">
                   <div class="tab_content_left">Tab_Content_Left</div>
                   <div class="tab_content_right">Tab_Content_Right</div>
               </div>

               <div class="tab-content">
                   <div class="tab_content_left">Tab_Content_Left</div>
                   <div class="tab_content_right">Tab_Content_Right</div>
               </div>

       </div>
    </div>
</body>
</html>

 

posted @ 2016-07-17 23:24  Avenstar  阅读(763)  评论(0)    收藏  举报