文档章节

js实现选项卡切换效果

jenn吖
 jenn吖
发布于 2016/06/15 11:01
字数 402
阅读 10
收藏 0
点赞 0
评论 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
博文 16
码字总数 12761
作品 0
崇明
ecshop 实现“精品、新品、热销”板块出现选项卡效果的方法

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

小果果x
2014/12/03
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
【翻译】25个浏览器开发工具的秘密

开发 过去几年来,浏览器开发工具一直是 Web 开发者最得力的工具。它能够与Web浏览器和谐相处,允许我们在当前窗口中实时地操作DOM元素、CSS样式和JavaScript,以及获取一些其他的有用信息。...

lg2045
2014/08/25
0
0
网站性能工具Yslow的使用方法

Yslow是雅虎开发的基于网页性能分析浏览器插件,从年初我使用了YSlow后,改变了博客模板大量冗余代码,不仅提升了网页的打开速度,这款插件还帮助我分析了不少其他网站的代码,之前我还特意写...

LorinLuo
2015/03/11
0
0
教你如何在博客园放“可运行"代码

自从看到别人的博客可以放上面那种可运行的代码后,我一直在研究这种效果是怎么弄出来的,我知道蓝色理想上面可以在编辑器里直接将代码放进一个可运行的代码框,发布后就是可运行的了。但博客...

蜗牛奔跑
2015/06/26
0
1
JQuery中操作Css样式的方法

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

Bery
2017/10/20
0
0
javascript(jQuery版)切换table效果自己动手丰衣足食

刚接触网页前端的时候,有好多涉及到两个甚至是三个四个的table标签切换 当时还没入门的我,很茫然,不懂怎么整。关注了javascript当时不好接受,很头大;代码一大片,不适合新手。 对比了好...

天外飘雪
2012/07/23
0
0
php练习-javascript,JQuey制作页面切换

php练习-javascript,JQuey制作页面切换 一.重点:css样式,js的dom取值,js的事件 JQuey引入地址 ; 二.js原生代码 实践题 - 选项卡</

一百个小排
07/02
0
0
javascript中的线程之我见

今天与一个同事争论javascripe中间的线程机制,他争论说javascript是有线程的,理由即使javascript中间的事件回调就是线程的实现,个人认为在javascript中是没有线程机制的 理由如下: 引自《...

mj4738
2013/02/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

tomcat 学习笔记之 Session管理

1、Catalina 通过一个 Session 管理器的组件来管理建立的Session 对象 该组件由 org.apache.catalina.Manager 接口表示 Session 管理器必须与一个 Context 关联 Session 管理器负责,创建、更...

职业搬砖20年
8分钟前
0
0
jquery获取input框的几种方式

//如何用jquery获取<input id="test" name="test" type="text"/>中输入的值?$(" #test ").val()$(" input[ name='test' ] ").val()$(" input[ type='text' ] ").val()$(" input[ ......

gulf
11分钟前
0
0
gradle的环境变量的配置

gradle的环境变量的配置 1.首先下载jdk,并且配置jdk的环境变量. 2.找到自己AS安装gradle的目录 我自己的目录为:F:\Android Studio3.1.3\gradle\gradle-4.4 创建环境变量:GRADLE_PATH: F:\A...

android-key
17分钟前
0
0
saltstack配置apache

1.相关配置 #vim /etc/salt/master //打开如下内容的注释 file_roots: base: - /srv/salt #mkdir /srv/salt #vim /srv/salt/top.sls base: 'slaver.test.com': - apache 注意:若换成 '*',则......

硅谷课堂
18分钟前
0
0
Nested enum types are implicitly static

.Nested enum types are implicitly static So there's no need to declare them static explicitly....

Yixin_Nemo
19分钟前
0
0
xlsxwriter 常用excel格式

官方文档:xlsxwriter 官方文档 微博只对常用的方法做了总结和coding,详细方法请参考官方文档 常规写入数据: 写入字符串write_string() import xlsxwriterworkbook = xlsxwriter.Workb...

白木日勿
19分钟前
0
0
TeX

Ito LaTeX是一类用于编辑和排版的软件,用于生成PDF文档。 LaTeX编辑和排版的核心思想在于,通过\section和\paragraph等语句,规定了每一句话在文章中所从属的层次,从而极大方便了对各个层次...

E-C-Ares
21分钟前
0
0
nodejs调用webservice接口

刚接触花了一天时间去查找资料,网上资料也是够了,很多都试了不行,最后看了还是那么简单 主要是了node-soap node-soap-ntlm soap-ntlm-2,这几个试了都有缺陷, 1 首先安装soap npm instal...

lovelan1314
22分钟前
0
0
SUSE Linux 将被 EQT 收购

SUSE再次易主 Micro Focus 宣布将其一大部分业务出售给瑞典私人股本集团殷拓(EQT),所得的一部分收益将用来减轻债务,其余部分将返给股东。EQT 是一家专注于开发领域的投资公司,在软件行业拥...

linux-tao
30分钟前
1
0
Elastic-Job定时任务

用Elastic-Job可解决分布式重复执行问题 如果业务工程采用集群化的部署,可能会多次重复执行定时任务而导致系统的业务逻辑错误,并产生系统故障。 job.properties simple.id=recommendJobs...

lsjlgo
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部