怎么用JavaScript实现tab切换
先看一下代码实现后的最终效果：
用JavaScript实现思路很简单，就是先把所有的内容隐藏，点击标题对应的内容显示，
css代码如下：
<style type="text/css">
#ltab {
clear: both;
/*清除全部浮动样式*/
}
#ltab_1 {
display: none;
}
#ltab_2 {
display: none;
}
#ltab_3 {
display: none;
}
</style>
html内容区域：
<body>
/标题区域/
<div class="home__tab___4BeRq">
<ul>
<li id="tabc_0" class="home__active___1gdd2" onclick="changeTab('0')">
<span class="home__tab-text___2P3Ej">最新资讯</span><span class="home__line___12SrG"></span>
</li>
<li id="tabc_1" onclick="changeTab('1')">
<span class="home__tab-text___2P3Ej">牛人动态</span><span class="home__line___12SrG"></span>
</li>
<li id="tabc_2" onclick="changeTab('2')">
<span class="home__tab-text___2P3Ej">股神排行</span><span class="home__line___12SrG"></span>
</li>
<li id="tabc_3" onclick="changeTab('3')">
<span class="home__tab-text___2P3Ej">大师策略</span><span class="home__line___12SrG"></span>
</li>
</ul>
</div>
/内容区域/
<div id="ltab">
<div id="ltab_0">
具体内容太繁琐，以简单文字代替
</div>
<div id="ltab_1">
具体内容太繁琐，以简单文字代替
</div>
<div id="ltab_2">
具体内容太繁琐，以简单文字代替
</div>
<div id="ltab_3">
具体内容太繁琐，以简单文字代替
</div>
</div>
</body>
js代码如下：
function changeTab(ltab_num) {
for(i = 0; i <= 3; i++) {
document.getElementById("tabc_" + i).className="" //隐藏所有的标题样式
document.getElementById("ltab_" + i).style.display = "none"; //将所有的层都隐藏
}
document.getElementById("tabc_"+ltab_num).className="home__active___1gdd2";//令当前选中状态的标题的class=“home__active___1gdd2”
document.getElementById("ltab_" + ltab_num).style.display = "block"; //显示当前层
}
相关参考网址：
http://www.jb51.net/article/74395.htm
怎么用JavaScript实现tab切换的更多相关文章
- JavaScript的Tab切换
在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...
- JavaScript实现Tab切换
在网页开发中,常常会遇见很多Tab切换,Tab切换增加网页浏览的舒适性,对于开发人员特别常见,本文使用JS实现tab切换效果,仅对学习中遇到的知识点做一个总结. 效果图如下: 实现思路: 1. ...
- jQuery的DOM操作实例（1）——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
- 实用CSS3属性之 :target伪类实现Tab切换效果
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...
- javascript回车完美实现tab切换功能
javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel ...
- javascript学习教程之---如何从一个tab切换到banner幻灯片的转换
一个简单的tab切换代码: <!doctype html> <html> <head> <meta charset="utf-8"> ...
- 每天一个JavaScript实例-tab标签切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JavaScript学习笔记2之Tab切换
1.Tab切换简写版1 页面布局如下: <div id="tab"> <h1 id="title"> <span class=&q ...
- JavaScript实现Tab栏切换
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...
随机推荐
- python2.7入门---JSON
这次我们来看如何使用 Python 语言来编码和解码 JSON 对象.首先,我们得了解,JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读 ...
- HDFS（0.20.2）运营中急救方案
这段时间折腾的都是hadoop和lucene,总结了hadoop在运营过程中出现问题时的解决方案,请大家指教! HDFS(0.20.2)运营中急救方案 1 Namenode 挂掉( ...
- 20155234 2016-2017-2 《Java程序设计》第3 周学习总结
20155234 2006-2007-2 <Java程序设计>第3周学习总结 教材学习内容总结 类是对象的设计图,对象是类的实例. 参考名称与对象数据成员同名时,可以在数据成员前使用thi ...
- 20155320 《Java程序设计》实验三 敏捷开发与XP实践
20155320 <Java程序设计>实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 (一)研究一下Code菜单 具体内容: 在IDEA中使用工具(Code-> ...
- 20155325 实验三 敏捷开发与XP实践
实验三 敏捷开发与XP实践-1 http://www.cnblogs.com/rocedu/p/4795776.html, Eclipse的内容替换成IDEA 在IDEA中使用工具(Code-> ...
- 20155331 《信息安全技术概论》实验二 Windows口令破解
20155331 <信息安全技术概论>实验二 Windows口令破解 [实验目的] 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 [实验原理] 口令破 ...
- Ubuntu genymotion
官网注册帐号 下载genymotion-[VERSION]_[ARCH].bin 进入android studio In Android Studio, go to File > Setting ...
- 简单的Slony-I设置实例 II
磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL集群方案相关索引页 回到顶级页面:PostgreSQL索引页 接前面例子, 简单的Slony-I设置实例 这次我 ...
- CSP201512-2：消除类游戏
引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...
- 简单在kubernetes中安装cadvisor
cadvisor用于分析docker资源占用情况及性能的工具 安装命令: docker run --volume=/:/rootfs:ro --volume=/: --detach=true --na ...