js,jq,css多方面实现简易Tab切换

最新推荐文章于 2022-08-21 10:05:19 发布

原创最新推荐文章于 2022-08-21 10:05:19 发布 · 767 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #jquery

jQuery 同时被 3 个专栏收录

30 篇文章

订阅专栏

javascript

28 篇文章

订阅专栏

css

12 篇文章

订阅专栏

本文详细介绍了如何通过CSS、JavaScript和jQuery三种方式来实现简易的Tab切换效果，包括各自的HTML、CSS和JavaScript代码实现部分，并提供了效果图预览。欢迎探讨更高效简洁的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过css , js , jq三个方式分别实现简易的Tab切换效果

效果图预览：

这里写图片描述

一、css实现

html和css部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            ul,li{
                list-style: none;
            }

            #tanContainer{
                width: 400px;
                height: 300px;
                border: 1px solid #ccc;
                margin: 50px auto;
                overflow: hidden;
            }

            #tab ul{
                width: 100%;
                height: 50px;
                overflow: hidden;
                line-height: 50px;
                text-align: center;
            }
            #tab ul li{
                float: left;
                border-right: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
            }
            #tab ul li a{
                display: block;
                width: 99.3px;
                height: 49px;
                color: #000000;
                text-decoration: none;
            }
            #tab ul li a:hover{
                background-color: aquamarine;
                cursor: pointer;
            }
            #tab ul li:last-child{
                border-right: none;
            }
            #tabCon{
                position: relative;
            }
            #tabCon div{
                width: 100%;
                height: 250px;
                line-height: 250px;
                text-align: center;
                position: absolute;
                left: 0;
                background-color: white;
            }
            #tab1:target,#tab2:target,#tab3:target,#tab4:target{
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div id="tanContainer">
            <div id="tab">
                <ul>
                    <li><a href="#tab1">标题一</a></li>
                    <li><a href="#tab2">标题二</a></li>
                    <li><a href="#tab3">标题三</a></li>
                    <li><a href="#tab4">标题四</a></li>
                </ul>
            </div>
            <div id="tabCon">
                <div id="tab4">内容四</div>
                <div id="tab3">内容三</div>
                <div id="tab2">内容二</div>
                <div id="tab1">内容一</div>    
            </div>
        </div>      
    </body>
</html>

二、js实现

html和css和js部分

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            li {
                list-style: none;
                float: left;
            }

            #tabCon {
                clear: both;
            }

            #tabCon div {
                display: none;
            }

            #tabCon div.fdiv {
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="tanContainer">
            <div id="tab">
                <ul>
                    <li class="fli">标题一</li>
                    <li>标题二</li>
                    <li>标题三</li>
                    <li>标题四</li>
                </ul>
            </div>
            <div id="tabCon">
                <div class="fdiv">内容一</div>
                <div>内容二</div>
                <div>内容三</div>
                <div>内容四</div>
            </div>
        </div>
    </body>
    <script>
        function $(id){
            return typeof id=="string"?document.getElementById(id):id;
        }

        var tabs = $("tab").getElementsByTagName("li");
        var divs = $("tabCon").getElementsByTagName("div");    

        for(var i = 0; i < tabs.length; i++){
            tabs[i].onclick = function(){
                set(this);
            }
        }

        function set(obj){
            for(var i = 0; i < tabs.length; i++){
                if(tabs[i] == obj){
                    divs[i].className = "fdiv";
                }else{
                    divs[i].className = " ";
                }               
            }
        }   
    </script>

</html>

三、jq实现

html和css和jq部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            ul,li{
                list-style: none;
            }

            #tanContainer{
                width: 400px;
                height: 300px;
                border: 1px solid #ccc;
                margin: 50px auto;
                overflow: hidden;
            }

            #tab ul{
                width: 100%;
                height: 50px;
                overflow: hidden;
                line-height: 50px;
                text-align: center;
            }
            #tab ul li{
                float: left;
                border-right: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                width: 99.3px;
                height: 49px;
                color: #000000;
                text-decoration: none;
            }
            #tab ul li:hover{
                background-color: aquamarine;
                cursor: pointer;
            }
            #tab ul li:last-child{
                border-right: none;
            }
            #tabCon{
                position: relative;
            }
            #tabCon div{
                width: 100%;
                height: 250px;
                line-height: 250px;
                text-align: center;
                position: absolute;
                left: 0;
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div id="tanContainer">
            <div id="tab">
                <ul>
                    <li>标题一</li>
                    <li>标题二</li>
                    <li>标题三</li>
                    <li>标题四</li>
                </ul>
            </div>
            <div id="tabCon">
                <div>内容一</div>  
                <div>内容二</div>
                <div>内容三</div>
                <div>内容四</div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../../jq/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#tab ul li").mouseenter(function(){
                $("#tabCon div").eq($(this).index()).show().siblings().hide();
            });
        });
    </script>
</html>