JS 来回切换图片

来源：互联网发布：大众网络报电子版编辑：程序博客网时间：2024/04/28 16:13
<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下的divvar 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>
0 0