文档章节

js实现选项卡切换效果

jenn吖
 jenn吖
发布于 2016/06/15 11:01
字数 402
阅读 12
收藏 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
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
电视机顶盒web开发总结,避免踩坑

1.电视机顶盒web开发总结 针对东方有线机顶盒UUTVOS操作系统中内置的联彤浏览器web开发,总结一些自己在开发中遇到的问题和技巧。浏览器是基于Firefox的阉割版,所以开发中有一些莫名其妙的坑...

漫步人生路君
06/04
0
0
JQuery中操作Css样式的方法

获取和设置样式 追加样式 移除样式 切换类名 判断是否含有某项样式 获取css样式中的样式 设置单个样式 设置多个样式 offset()方法 它的作用是获取元素在当前视窗的相对偏移,其中返回对象包含...

Bery
2017/10/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

70.shell的函数 数组 告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.16/20.17 shell中的函数: ~1. 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段...

王鑫linux
今天
0
0
分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
今天
5
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
今天
4
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
今天
31
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部