此文章是vip文章,如何查看?  

1,点击链接获取密钥 http://nicethemes.cn/product/view29882.html

2,在下方输入文章查看密钥即可立即查看当前vip文章


利用JavaScript实现选项卡切换

  • 时间:
  • 浏览:
  • 来源:互联网

利用JavaScript实现选项卡切换

一、HTML页面布局

  • 选项卡标题使用ul..li
  • 选项卡内容使用div

二、CSS样式制作

  • 整个选项卡的样式设置
  • 选项卡标题的样式设置
  • 选项卡内容的样式设置
  • 一开始只显示一个选项卡内容,其它选项卡内容隐藏。

三、JS实现选项卡切换

  • 利用for循环分别对每个标题添加一个index属性作为它的序号,同时注册单击事件,当标题LI被单击时,我们先把所有的LI都变成原始状态,没有xuanzhong类,把所有的DIV都隐藏,然后再给被单击的LI添加一个xuanzhong类使其变成选中样式,此时,我们还要知道被单击的LI的序号,这样我们可以去设定与之序号相同的DIV显示出来。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */
     *{
         margin:0;
         padding:0;}
     ul{
         border-bottom:#8B4513 solid 2px;
         height:48px;
         margin-right:30px;
     }
     li{
        list-style:none;
        float:left;
        border-style:solid;
        border-color:gray;
        border-width:1px;
        border-bottom:none;
        padding:7px 15px;
        margin-top:10px;
        margin-right:5px;} 
     .nr{
        clear:both;
        border-style:solid;
        border-color:blue;
        border-width:1px;
        border-top:none;
        padding:10px 15px;
        margin-right:30px;
        line-height:25px;
        display:none;
     } 
     .show{
        display:block; 
     }
     .xuanzhong{
        border-top:#8B4513 solid 2px;
        border-bottom:#fff solid 2px;
     }
    </style>
    <script type="text/javascript">

    // JS实现选项卡切换
    window.onload = function(){
    var oLis = document.getElementsByTagName("li");
    var oDivs = document.getElementsByTagName("div");
    for(i=0;i<oLis.length;i++){
        oLis[i].index = i; //获取索引值
        oLis[i].onmouseover = function(){
            for(i=0;i<oLis.length;i++){
                oLis[i].className = "";
                oDivs[i].style.display = "none";
            };
            this.className = "xuanzhong";
            oDivs[this.index].style.display = "block";
        };
    };
    }
    </script>

</head>
<body>
<!-- HTML页面布局 -->
<ul>
    <li class = "xuanzhong">房产</li>
    <li>家居</li>
    <li>二手房</li>
</ul>
<div class = "nr show">
    <p>275万购昌平邻铁三居 总价20万买一居</p>
    <p>200万内购五环三居 140万安家东三环</p>
    <p>北京首现零首付楼盘 53万购东5环50</p>
    <p>京楼盘直降5000 中信府 公园楼王现房</p>
</div>
<div class = "nr">
    <p>40平出租屋大改造 美少女的混搭小窝</p>
    <p>经典清新简欧爱家 90平老房焕发新生</p>
    <p>新中式的酷色温情 66平撞色活泼家居</p>
    <p>瓷砖就像选好老婆 卫生间烟道的设计</p>
</div>
<div class = "nr">
    <p>通州豪华3居260万 二环稀缺2居250w甩</p>
    <p>西3环通透2居290万 130万2居限量抢购</p>
    <p>黄城根小学学区仅260万 121平70万抛</p>
    <p>独家别墅280万 苏州桥2居优惠价248万</p>
</div> 
</body>
</html>

本文链接http://element-ui.cn/news/show-513452.aspx