您现在的位置是：首页 > Web前端

Web前端

HTML+CSS原生选项卡功能详解

2024-06-12Web前端

本文通过原生html、css、js等语言，简单实现了选项卡功能，通俗易懂，适合小白入门学习。

以下是一个简单的HTML和CSS实现的选项卡功能，默认情况下第一个选项卡被选中：

        html---------------------------------------------------------
        
        
        <div class="article_list_cate">

            <a class="article_list_cate_a       article_list_active" onclick="openTab(event,'tab1')" href="javascript:;"><span>企业新闻</span></a>
            <a class="article_list_cate_a " onclick="openTab(event,'tab2')" href="javascript:;"><span>行业新闻</span></a>

        </div>

        <div id="tab1" class="article_list_cate_tab ">

            <div class="article_list_cate_tab_items">


                <div class="article_list_cate_tab_top">
                    <div class="article_list_cate_tab_top——time"> 01/06/2024</div>
                    <div class="article_list_cate_tab_top——time_list">

                        <a class="article_list_cate_tab_top——a" href="">立为激光获泰安市发展扶持专项资金</a>
                        <a class="article_list_cate_tab_top——b">></a>
                    </div>
                </div>

            </div>

            <div class="article_list_cate_tab_items">


                <div class="article_list_cate_tab_top">
                    <div class="article_list_cate_tab_top——time"> 01/06/2024</div>
                    <div class="article_list_cate_tab_top——time_list">

                        <a class="article_list_cate_tab_top——a" href="">立为激光获泰安市发展扶持专项资金</a>
                        <a class="article_list_cate_tab_top——b">></a>
                    </div>
                </div>

            </div>

            <div class="article_list_cate_tab_items">


                <div class="article_list_cate_tab_top">
                    <div class="article_list_cate_tab_top——time"> 01/06/2024</div>
                    <div class="article_list_cate_tab_top——time_list">

                        <a class="article_list_cate_tab_top——a" href="">立为激光获泰安市发展扶持专项资金</a>
                        <a class="article_list_cate_tab_top——b">></a>
                    </div>
                </div>

            </div>

        </div>

        <div id="tab2" style="display: none;"   class="article_list_cate_tab ">

            <div class="article_list_cate_tab_items">


                <div class="article_list_cate_tab_top">
                    <div class="article_list_cate_tab_top——time"> 01/06/2024</div>
                    <div class="article_list_cate_tab_top——time_list">

                        <a class="article_list_cate_tab_top——a" href="">22222222</a>
                        <a class="article_list_cate_tab_top——b">></a>
                    </div>
                </div>

            </div>

            <div class="article_list_cate_tab_items">


                <div class="article_list_cate_tab_top">
                    <div class="article_list_cate_tab_top——time"> 01/06/2024</div>
                    <div class="article_list_cate_tab_top——time_list">

                        <a class="article_list_cate_tab_top——a" href="">22222222</a>
                        <a class="article_list_cate_tab_top——b">></a>
                    </div>
                </div>

            </div>

            <div class="article_list_cate_tab_items">


                <div class="article_list_cate_tab_top">
                    <div class="article_list_cate_tab_top——time"> 01/06/2024</div>
                    <div class="article_list_cate_tab_top——time_list">

                        <a class="article_list_cate_tab_top——a" href="">22222222</a>
                        <a class="article_list_cate_tab_top——b">></a>
                    </div>
                </div>

            </div>

        </div>

js-----------------------------------------
    <script>

        function openTab(event, tabName) {
            var tabs = document.querySelectorAll('.article_list_cate_tab');
            tabs.forEach(tab => {
                tab.style.display = 'none';
            });
            // Remove active class from all a  
            var tabButtons = document.querySelectorAll('.article_list_cate_a');
                    tabButtons.forEach(function(button) {
                        button.classList.remove('article_list_active');
             });
            // Show the selected tab content
            document.getElementById(tabName).style.display = 'block';

            // Add active class to the clicked button
            event.currentTarget.classList.add('article_list_active');
        }
    </script>

css------------------------------------------

/*新闻列表页*/
.article_list——title{
    font-size: 36px;
    line-height: 40px;
    text-align: center;
    color: #000;
    padding: 5% 0;
}
.article_list_active{
    background-color: #f5f5f7;
    color: #3aa1d5 !important;
   
}
.article_list_cate{
    margin-bottom: 40px;
    border-bottom: 1px solid #f5f5f7;
    display: flex;
}
.article_list_cate_a{
    color: #000;
    margin-right: 5%;

}
.article_list_cate_a:hover{
    color: #3aa1d5;
    transition: all 1s;
    background-color: #f5f5f7;
    cursor: pointer;

}
 .article_list_cate_a span{
    font-size: 24px;
    line-height: 36px;
    margin-right: 10px;
    text-align: center;
    width: 194px;
    padding: 10px;
    display: block;
}
.article_list_cate_tab_items{
    border-bottom: 1px solid #000;
    padding-bottom: 30px;
    margin-bottom: 40px;
}
.article_list_cate_tab_top——time{
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 30px;
    color: #585757;
}
.article_list_cate_tab_top——a{
    color: #000;
    font-size: 20px;
    line-height: 36px;
   
}
.article_list_cate_tab_top——a:hover{
color: #337ab7;
cursor: pointer;
transition: all 0.5s;
   
}

.article_list_cate_tab_top——time_list{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.article_list_cate_tab_top——b{
    font-size: 30px;
}