文档章节

js实现选项卡切换效果

jenn吖
 jenn吖
发布于 2016/06/15 11:01
字数 402
阅读 14
收藏 0
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        #tab{
            margin:10px;
        }
       #tab ul{
            list-style:none;
            height:36px;
            border-bottom:2px solid black ;
            display:block;
       }
       #tab ul li{
           float:left;
           display:inline-block;
           padding:0px 15px;
           height:34px;
           line-height:34px;
           margin-right:5px;
           border:1px solid #ccc;
           border-bottom:none;
           cursor:pointer;
       }
       #tab div{
           padding:5px;
           border:1px solid #ccc;
           border-top:none;
            
       }
       #tab ul li.on{
           border-top:2px solid black;
           border-bottom: 2px solid white;
       }
       .hide{
           display:none;
       }
        
    </style>
    <script type="text/javascript">
        window.onload=function(){
         var mytab =document.getElementById("tab");
         var myul=mytab.getElementsByTagName("ul")[0];
         var myli=myul.getElementsByTagName("li");
         var mydiv=mytab.getElementsByTagName("div");
        //  alert(mydiv.length)
         for(i=0,len=myli.length;i<len;i++){
             myli[i].index=i;
             myli[i].onclick=function(){
                 for(var n=0;n<len;n++){
                     myli[n].className="";
                     mydiv[n].className="hide";
                 }
                 this.className="on";                 
                 mydiv[this.index].className="";
                  
             }
         }
        }
     
    </script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab">
    <ul>
        <li class="on">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div>
         275万购昌平邻铁三居 总价20万买一居
        200万内购五环三居 140万安家东三环
        北京首现零首付楼盘 53万购东5环50平
        京楼盘直降5000 中信府 公园楼王现房
    </div>
    <div class="hide">
        40平出租屋大改造 美少女的混搭小窝
     经典清新简欧爱家 90平老房焕发新生
     新中式的酷色温情 66平撞色活泼家居
     瓷砖就像选好老婆 卫生间烟道的设计
    </div>
    <div class="hide">
        通州豪华3居260万 二环稀缺2居250w甩
     西3环通透2居290万 130万2居限量抢购
     黄城根小学学区仅260万 121平70万抛!
     独家别墅280万 苏州桥2居优惠价248万
    </div>
</div>
</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
jenn吖
粉丝 6
博文 17
码字总数 12761
作品 0
崇明
私信 提问
ecshop 实现“精品、新品、热销”板块出现选项卡效果的方法

最近做一个网络商城,直接使用ecshop的免费模板,懒得重新做,ecshop建站多日了,一直想在主页的板块中建网页选项卡鼠标经过自动切换效果,百度搜索这方面的内容也没找到合适的,今天一实验,...

小果果x
2014/12/03
0
0
JS 做的tab选项卡 在一次点击之后CSS hover 就失灵了

用js做了一个简单的tab选项卡,一共8个DIV,4个卡,4个内容,然后用JS点击事件判断,点哪个哪个的tab卡变换图片,然后对应内容div显示,其他则隐藏,同时要实现一个类似导航的滑动效果,起初...

sea__blue
2011/06/14
1K
8
ReactNative页面跳转与事件监听

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_17775997/article/details/82380629 自从React Native出世,虽然官方一直尽可能的优化其性能,为了能让...

大灰狼的小绵羊哥哥
09/04
0
0
bootstrap.js学习笔记

模态弹出框 Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ☑ 弹...

_好久不见
2015/11/05
0
0
[原创]tab滑动面板效果初探

从接触jquery到现在,几乎没怎么去运用,之前一直习惯写js代码,今天想试着用jq实现一些常用的UI功能,滑动面板切换效果 先看效果图,样式比较简单:点击下载【原创】tab切换面板.zip 实例一...

长平狐
2012/08/30
838
2

没有更多内容

加载失败,请刷新页面

加载更多

微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
今天
2
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
今天
3
0
大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
今天
3
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
今天
3
0
Terraform配置文件(Terraform configuration)

Terraform配置文件 翻译自Terraform Configuration Terraform用文本文件来描述设备、设置变量。这些文件被称为Terraform配置文件,以.tf结尾。这一部分将讲述Terraform配置文件的加载与格式。...

buddie
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部