js实现选项卡

通过JavaScript实现如上选项卡切换的效果。

实现思路：

一、HTML页面布局

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

二、CSS样式制作

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

三、JS实现选项卡切换

获取选项卡标题和选项卡内容
选项卡内容多个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配
通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏

<!--代码一--><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /*
     标签和文本结合区域效果制作：
     1.用ul做分类标签
     2.把ul的display定义为block使ul区域和下面div区域结合在一起
     3.给ul定义一个下边框或者给div内容区域定义一个上边框
     4.所有li标签默认样式不设下边框，作为激活显示的li标签加宽其#fff（白色）
     区域的下边框，覆盖。
     */
*{
    margin:0px; padding:0px; font:12px normal; font-family:微软雅黑;
    }
 #tabs{
     width:290px; height:150px; padding:5px; margin:20px;
 }
 #tabs ul{
     list-style:none; display:block; height:30px; line-height:30px;
 }
 #tabs ul li{
     float:left; width:60px; height:28px; line-height:28px; text-align:center;
     display:inline-block;margin:0px 3px; border:1px solid #aaa;border-bottom:none;
     cursor:pointer; background:#fff; list-style:none;
 }
 #tabs ul li.on{
     border-top:2px solid blue; border-bottom:2px solid white;
 }
 #tabs div{
     height:120px; line-height:25px; border:1px solid #336699;border-top:2px solid blue;padding:5px;
 }
 .hide{display:none;}
    </style>
    <script type="text/javascript">     

    window.onload=function(){
        var oTab = document.getElementById("tabs")
        var li = document.getElementsByTagName("li");
        var div = oTab.getElementsByTagName("div");
        //oTabs.get...为了定义className作用对象为id为tabs下的所有文本div

        for(var i=0;i<li.length;i++){       //获取所有i编号的元素
            li[i].index = i;                //定义一个index属性对li进行编号
            li[i].onmouseover = function(){ //注册一个点击事件，鼠标移过所有标签恢复最初状态
            for(var n=0;n<li.length;n++){   //对所有li标签设置类名（对应样式）
                li[n].className = "";
                div[n].className = "hide";
            }
            //设置选中标签的类名改变其样式
            this.className = "on";          //对鼠标焦点处的li标签设置类名（覆盖前面设置过的样式）
            //设置选中标签下对应的div内容的类名来改变样式
            div[this.index].className = ""; //通过之前的index编号绑定的指定div（重新设置属性）
            }
        }
    }

    </script>

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

<!--代码二--><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */
     *{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
     ul{list-style-type: none;}
     a{text-decoration: none;}

     #tab-list{width: 275px;height:190px;margin: 20px auto;}

     #ul1{border-bottom: 2px solid #8B4513;height: 32px;}
     #ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
     #ul1 li:hover{cursor: pointer;}
     #ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}

     #tab-list div{border: 1px solid #7396B8;border-top: none;}
     #tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}

     .show{display: block;}.hide{display: none;}
    </style>
    <script type="text/javascript">

    window.onload = function() {
        var oUl1 = document.getElementById("ul1");
        var aLi = oUl1.getElementsByTagName("li");
        var oDiv = document.getElementById("tab-list");
        var aDiv = oDiv.getElementsByTagName("div");
        for(var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onmouseover = function() {
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].className = "";
                }
                this.className = "active";
                for(var j = 0; j < aDiv.length; j++) {
                    aDiv[j].className = "hide";
                }
                aDiv[this.index].className = "show";
            }
        }
    }

    </script>

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

来源：慕课网课程练习：http://www.imooc.com/code/1912

js实现选项卡的更多相关文章

用js实现选项卡切换效果
这是要实现的效果图: 一.HTML页面布局 <ul class="tab_menu"> <li class=&quo ...
用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
js实现选项卡切换
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
js原生选项卡（自动播放无缝滚动轮播图）二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...
js原生选项卡（包含无缝滚动轮播图）一
原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...
Jquery&JS简单选项卡
结果,如图为了明显,用绿色+红色第一步:静态布局先写html代码和css样式要点一: ul li都为块级元素,可以用height,但是里面字体不居中,我们用line-height,即达到居中 ...
JS原生选项卡 – 幻灯片效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
ionic js ion-tabs选项卡栏操作
ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航 ...
使用原生js实现选项卡功能实例教程
选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...

随机推荐

BZOJ2310 : ParkII
单路径最大和问题,设f[i][j][S]表示到达(i,j),轮廓线状态为S的最优解. S用4进制m+1位数表示,0表示无插头,1表示左括号,2表示右括号,3表示独立插头. 在DP之前先进行一次预处理, ...
HDU 4856 (状态压缩DP+TSP)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4856 题目大意:有一个迷宫.迷宫里有些隧道,每个隧道有起点和终点,在隧道里不耗时.出隧道就耗时,你的 ...
我的conky配置
安装conky的方法请看我博客另外一篇文章,这里不再阐述点这里附上我的配置2013.08.29(吾喷) background no font WenQuanYi Micro Hei:size=10 ...
Log4j日志级别
日志记录器(Logger)是日志处理的核心组件.log4j具有5种正常级别(Level). 日志记录器(Logger)的可用级别Level (不包括自定义级别 Level), 以下内容就是摘自log4 ...
QPushButton 与 QListWidget 的按键响应
在Qt中添加按钮或表格控件时需要添加其按键响应,一般来说有两种方法,一种是直接实现其响应函数,第二种是自己写一个响应函数,然后用Qt的信号槽将它们连接起来.愚以为第一种方法更为简单一些. 声明这些控件 ...
android之listview
首先建立res/layout/data_list.xml: 代码如下: <?xml version="1.0" encoding="utf-8"?> ...
关于如何用php 获取当前脚本的url
关于用php 获取当前脚本的url很多朋友会说很简单,但是要获取很详细的就要经过多次判断哦. $PHP_TIME = time();$PHP_SELF = isset($_SERVER['PHP_SE ...
linux源码组织
linux源代码在https://www.kernel.org/就可以下.现在的稳定版本是3.16.3. 因为简历上有个项目是内核有关的,为了准备一下面试,还是要重温一下内核才行.最基本的,哪些文件在 ...
释放用完的Excel COM组件
How to Open; SaveAs; then Close an Excel 2013 (macro-enabled) workbook from PowerShell4 1. (http:/ ...
sonarqube 安装配置
http:// www.sonarqube.org MySQL Unsupported mysql version: 5.5. Minimal supported version is 5.6. Th ...

js实现选项卡

js实现选项卡的更多相关文章

随机推荐

热门专题