JS 来回切换图片

最新推荐文章于 2023-03-16 13:57:49 发布

xw1985520

最新推荐文章于 2023-03-16 13:57:49 发布

阅读量1.1k

点赞数

分类专栏： JAVASCRIPT 文章标签： javascript 图片

本文链接：https://blog.csdn.net/xw1985520/article/details/53914583

版权

JAVASCRIPT 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript  tab切换</title>
<style>
#card{
    font-size:14px;
    color:#fff;
}

#tit{
    width:300px;
    height:30px;
}
#tit h3{
    width:96px;
    text-align:center;
    float:left;
    border:2px solid #fff;
    background-color:#ccc;
    line-height:30px;
    padding:0px;
    margin:0px;
}
#tit .h3_now{
    background-color:#888;
}

#content{
    background-color:#888;
    width:300px;

}
#content div{
    display:none;
}

#content .now{
    display:block;
}


</style>

</head>

<body>
<div id="card">
    <div id="tit">
        <h3 class="h3_now" onmouseover="change(0)">国际新闻</h3>
        <h3 onmouseover="change(1)">国内新闻</h3>
        <h3 onmouseover="change(2)">体育新闻</h3>
    </div>
    <div id="content">
        <div class="now">
            <ul>
                <li>国际新闻1</li>
                <li>国际新闻2</li>
                <li>国际新闻3</li>
                <li>国际新闻4</li>
                <li>国际新闻5</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>国内新闻1</li>
                <li>国内新闻2</li>
                <li>国内新闻3</li>
                <li>国内新闻4</li>
                <li>国内新闻5</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>体育新闻1</li>
                <li>体育新闻2</li>
                <li>体育新闻3</li>
                <li>体育新闻4</li>
                <li>体育新闻5</li>
            </ul>
        </div>
    </div>
</div>
<script>
//获取h3的对象
var h3obj = document.getElementsByTagName("h3");
//获取content下的div
var dobj = document.getElementById("content").getElementsByTagName("div");
function change(id){ //id=1
    //循环比较id和i
    for(var i=0;i<h3obj.length;i++){
        if(i==id){ //i=1
            //说明用户鼠标划过的层id
            //与当前循环到的值一致
            h3obj[i].className="h3_now";
            dobj[i].className="now";
        }else{//i=0 i=2
            h3obj[i].className="";
            dobj[i].className="";
        }
    }
}


</script>
</body>
</html>