[前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果
使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果:
文字素材:
房产:
275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府 公园楼王现房
家居:
40平出租屋大改造 美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆 卫生间烟道的设计
二手房:
通州豪华3居260万 二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万 苏州桥2居优惠价248万
先分析基本思路。首先编写HTML,然后再加载样式,最后用JS修改相应的DOM,达到更改选项卡和内容的目的。
一、HTML页面布局
HTML显示的是所有与文字有关的信息,所以在这个页面中与文字有关的信息为上面选项卡的三个标题,以及选项卡的内容。
于是决定标题使用<ul> <li>布局,内容使用<div>布局。编写代码如下:
现在展示出来的样式是这样的:
CSS样式
要制作成上图所示的选项卡样式,几个地方需要注意:
1、整个选项卡的样式设置
2、选项卡标题的样式设置
3、选项卡内容的样式设置
4、只能显示一个选项卡的内容,其他选项卡内容隐藏。
写完以后,效果就出来啦。
JavaScript实现选项卡切换
1、首先需要获取选项卡标题和选项卡内容
2、选项卡内容有三个,需要循环遍历来操作,得知哪个选项卡和哪个选项内容匹配。
3、通过改变DOM的css类名称,当前点击的选项卡显示,其它隐藏。
完整代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{padding:0px; margin:0px;}
a{ text-decoration:none; color:black;}
a:hover{text-decoration:none; color:#336699;}
#tab{width:270px; padding:5px;height:150px;margin:20px;}
#tab ul{list-style:none; display:;height:30px;line-height:30px; border-bottom:2px #C88 solid;}
#tab ul li{background:#FFF;cursor:pointer;float:left;list-style:none height:29px; line-height:29px;padding:0px 10px; margin:0px 10px; border:1px solid #BBB; border-bottom:2px solid #C88;}
#tab ul li.on{border-top:2px solid Saddlebrown; border-bottom:2px solid #FFF;}
#tab div{height:100px;width:250px; line-height:24px;border-top:none; padding:1px; border:1px solid #336699;padding:10px;}
.hide{display:none;}
</style> <script type="text/javascript">
// JS实现选项卡切换
window.onload = function(){
var myTab = document.getElementById("tab"); //整个div
var myUl = myTab.getElementsByTagName("ul")[0];//一个节点
var myLi = myUl.getElementsByTagName("li"); //数组
var myDiv = myTab.getElementsByTagName("div"); //数组 for(var i = 0; i<myLi.length;i++){
myLi[i].index = i;
myLi[i].onclick = function(){
for(var j = 0; j < myLi.length; j++){
myLi[j].className="off";
myDiv[j].className = "hide";
}
this.className = "on";
myDiv[this.index].className = "show";
}
}
}
</script> </head>
<body>
<!-- HTML页面布局 -->
<div id = "tab">
<ul>
<li class="off">房产</li>
<li class="on">家居</li>
<li class="off">二手房</li>
</ul>
<div id="firstPage" class="hide">
<a href = "#">275万购昌平邻铁三居 总价20万买一居</a><br/>
<a href = "#">200万内购五环三居 140万安家东三环</a><br/>
<a href = "#">北京首现零首付楼盘 53万购东5环50平</a><br/>
<a href = "#">京楼盘直降5000 中信府 公园楼王现房</a><br/>
</div>
<div id="secondPage" class="show">
<a href = "#">40平出租屋大改造 美少女的混搭小窝</a><br/>
<a href = "#">经典清新简欧爱家 90平老房焕发新生</a><br/>
<a href = "#">新中式的酷色温情 66平撞色活泼家居</a><br/>
<a href = "#">瓷砖就像选好老婆 卫生间烟道的设计</a><br/>
</div>
<div id="thirdPage" class = "hide">
<a href = "#">通州豪华3居260万 二环稀缺2居250w甩</a><br/>
<a href = "#">西3环通透2居290万 130万2居限量抢购</a><br/>
<a href = "#">黄城根小学学区仅260万 121平70万抛!</a><br/>
<a href = "#">独家别墅280万 苏州桥2居优惠价248万</a><br/>
</div>
</div> </body>
</html>
---------------------
作者:童凌
来源:CSDN
原文:https://blog.csdn.net/tlonline/article/details/50995865
版权声明:本文为博主原创文章,转载请附上博文链接!
[前端] html+css+javascript 实现选项卡切换效果的更多相关文章
- 用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
- 使用jquery实现选项卡切换效果
几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...
- JS实现选项卡切换效果
1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升 原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...
- vue实现选项卡切换效果
效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...
- 使用ViewPager+Fragment实现选项卡切换效果
实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...
- 纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
- 前端html+css+JavaScript 需要掌握的单词
前端html+css+JavaScript 需要掌握的单词 broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php ...
- vue实现tab选项卡切换效果
tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...
随机推荐
- 代码规范V1.1
作业要求:[https://edu.cnblogs.com/campus/nenu/SWE2017FALL/homework/993] 代码规范文档/代码规范执行记录:[https://coding. ...
- PS学习之制作音乐视屏
素材: 新建画布 插入图片素材 调整和画布一样大小 喜欢彩色的 可以加照片滤镜 喜欢黑白的可以加黑白滤镜 也可以添加自己喜欢的文字 在窗口中选择时间轴 创建视屏时间轴 图中标记得就是每秒能播放30张 ...
- C++学习(四)(C语言部分)之 二进制
二进制学习时的笔记(其实也没什么用,留着给自己看的) 二进制简介只有 0 1 优点:1.二进制状态简单2.可靠性.稳定性高3.运算规则简单,简化设计4.通用性强 二进制计算正数二进制十进制转二进制(除 ...
- day5 python学习
本日主要讲了列表的一些操作 1.列表的增 ret=['wang','taibai','alxe','ritian'] ret.append("wusir") print(ret) ...
- The Guardian’s Migration from MongoDB to PostgreSQL on Amazon RDS
转载一片mongodb 迁移pg 数据库的文章 原文:https://www.infoq.com/news/2019/01/guardian-mongodb-postgresql The Guardi ...
- 13机器学习实战之PCA(2)
PCA——主成分分析 简介 PCA全称Principal Component Analysis,即主成分分析,是一种常用的数据降维方法.它可以通过线性变换将原始数据变换为一组各维度线性无关的表示,以此 ...
- HDU2220 Eddy's AC难题
版权声明:长风原创 https://blog.csdn.net/u012846486/article/details/27853287 Eddy's AC难题 Time Limit: 3000/100 ...
- 计算元素个数(count和count_if)
count 计算first和last之间与value相等于元素个数 template <class InputIterator,class EqualityComparable> type ...
- 数据库连接出错 expected key exchange group packet form server
数据库连接出错 expected key exchange group packet form server SSH: expected key exchange group packet form ...
- taro 最佳实践
对 JSX 支持程度补充说明: 不能在包含 JSX 元素的 map 循环中使用 if 表达式 不能使用 Array#map 之外的方法操作 JSX 数组 不能在 JSX 参数中使用匿名函数 暂不支持在 ...