Tab切换

最新推荐文章于 2023-05-29 11:58:59 发布

_Clarity_

最新推荐文章于 2023-05-29 11:58:59 发布

阅读量116

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/qq_43575703/article/details/104799463

版权

html 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在这里插入图片描述

鼠标分别放到“国际新闻”、“国内新闻”、“河南新闻”时，分别出现“1111111”、“22222”、“3333”内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab切换</title>
</head>
<!--CSS-->
<style>
    *{
        padding: 0px;
        margin: 0px;
        list-style: none;
    }
    #container{
        margin: 30px 50px;
    }
    ul li{
        float: left;
        height: 40px;
        line-height: 40px;
        color: blue;
    /*    background-color: orange;*/
        margin: 1px;
        padding: 0px 15px;
        cursor: pointer;
        font-weight: bold;
    }
    #content{
        clear: both;
        width: 300px;
        height: 300px;
        border: 2px solid green;
        word-wrap: break-word;
        text-indent: 2em;   /*首行缩进2个字节*/
    }
    #container #tab .on{
        color: red;
        border-bottom: 2px solid red;
    }
    #content>div{
        display: none;
    }
    #content .selected{
        display: block;
    }
</style>

<body>
<!--HTML-->
<div id="container">
    <ul id="tab">
        <li class="on">国际新闻</li>
        <li>国内新闻</li>
        <li>河南新闻</li>
    </ul>
    <div id="content">
        <div class="selected">111111111111111111111111111111111111111111111111111111</div>
        <div>222222222222222222222222222222222222222222222222222222</div>
        <div>333333333333333333333333333333333333333333333333333333</div>
    </div>
</div>



<!--JS-->
<script>

    var tabs=document.getElementById('tab').getElementsByTagName('li');
    var divs=document.getElementById('content').getElementsByTagName('div');

    /*遍历标签*/
    for(var i=0;i<tabs.length;i++){
        tabs[i].onmouseover=function(){
            change(this);
        }
    }
    function change (obj){
        for(var i=0;i<tabs.length;i++){
            if(tabs[i]==obj){
                tabs[i].className="on";
                divs[i].className="selected";
            }
            else{
                tabs[i].className=" ";
                divs[i].className=" ";
            }
        }
    }
</script>

</body>
</html>

_Clarity_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Tab切换

鼠标分别放到“国际新闻”、“国内新闻”、“河南新闻”时，分别出现“1111111”、“22222”、“3333”内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
复制链接

扫一扫

专栏目录