前端-選項卡（菜單欄）

時間 2019-12-09

標籤前端選項菜單简体版

原文原文鏈接

項目中要用到選擇卡這種思路，因此事先本身作了個demo，僅供參考：javascript

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .main {
                width: 600px;
                margin: 100px auto;
            }
            
            .clearfix:after {
                content: '';
                display: table;
                clear: both;
            }
            
            .clearfix {
                zoom: 1;
            }
            
            ul {
                list-style: none;
            }
            
            li {
                float: left;
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
            }
            li.active{
                background: #ddd; //.active是一個class類
            }
            .main-content{
                margin-top: 40px;
            }
            
            .main-content .box {
                width: 400px;
                height: 400px;
                margin: 0 auto;
                border: 1px solid #ddd;
                display: none;
            }
            .main-content .box.active{
                display: block;
            }
        </style>
    </head>

    <body>
        <div class="main">
            <ul class="clearfix list">
                <li class="active">
                    <a href="javascript:;">菜單1</a>
                </li>
                <li>
                    <a href="javascript:;">菜單2</a>
                </li>
                <li>
                    <a href="javascript:;">菜單3</a>
                </li>
                <li>
                    <a href="javascript:;">菜單4</a>
                </li>
                <li>
                    <a href="javascript:;">菜單5</a>
                </li>
                <li>
                    <a href="javascript:;">菜單6</a>
                </li>
            </ul>

            <div class="main-content">
                <div class="box active">1</div>
                <div class="box">2</div>
                <div class="box">3</div>
                <div class="box">4</div>
                <div class="box">5</div>
                <div class="box">6</div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
    <script>
        $(function(){
            $('.list li').on('click',function(){
                $('.list li').removeClass('active');     
                $(this).addClass('active');       
                $('.main-content .box').removeClass('active');   
                $('.main-content .box').eq($(this).index()).addClass('active'); 
            })
        })
    </script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。