先看一下代码实现后的最终效果：

用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切换的更多相关文章

  1. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  2. JavaScript实现Tab切换

    在网页开发中,常常会遇见很多Tab切换,Tab切换增加网页浏览的舒适性,对于开发人员特别常见,本文使用JS实现tab切换效果,仅对学习中遇到的知识点做一个总结. 效果图如下:     实现思路: 1. ...

  3. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  4. 实用CSS3属性之 :target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...

  5. javascript回车完美实现tab切换功能

    javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel ...

  6. javascript学习教程之---如何从一个tab切换到banner幻灯片的转换

    一个简单的tab切换代码: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  7. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. JavaScript学习笔记2之Tab切换

    1.Tab切换简写版1 页面布局如下: <div id="tab"> <h1 id="title"> <span class=&q ...

  9. JavaScript实现Tab栏切换

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...

随机推荐

  1. C++与C#的多态

    C++ 多态 多态按字面的意思就是多种形态.当类之间存在层次结构,并且类之间是通过继承关联时,就会用到多态. C++ 多态意味着调用成员函数时,会根据调用函数的对象的类型来执行不同的函数. 下面的实例 ...

  2. 20155217 2016-2017-2 《Java程序设计》第6周学习总结

    20155217 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 InputStream与OutputStream 10.1.1串流设计的概念 Jav ...

  3. # 第二周课堂实践以及MyOD

    第二周课堂实践以及MyOD 之前使用的虚拟机出现问题被我删掉了,开始学着使用Mac系统自带的终端.在课堂上出现了问题,询问王雄老师也没有解决,课下先使用了实验楼环境进行实验,后来又在Mac重新进行了尝 ...

  4. 20155235 《Java程序设计》 实验二 Java面向对象程序设计

    20155235 <Java程序设计> 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L ...

  5. 20155325 信息安全技术 实验二 Windows口令破解

    内容一览 实验结果 遇到的问题 思考题 详细步骤与解析(为了使存做笔记资料而做) 实验结果 字典破解 暴力破解 -不同密码强度的破解时间比较 用户名 密码 破解方式 破解时间 TEST (年月日) 字 ...

  6. Android开发——你真的了解Dialog、Toast和Snackbar吗

    0. 前言 今天给大家带来一篇简单易懂的关于Android提醒小功能的文章.Dialog和Toast我们都不陌生,而Snackbar是Design Support库中提供的新控件,有些朋友可能还不了解 ...

  7. #333. 【NOIP2017】宝藏

    #333. [NOIP2017]宝藏 http://uoj.ac/problem/333 1.错误的$n^42^n$做法: dp[s]表示当前的点集为s,然后从这些点中选一个做起点i,然后枚举边,然后 ...

  8. 单元测试或main方法 进行单元测试时 idea检查其他类的语法是否正确的去除方法

    在进行单元测试或者main方法时,在 运行/调试 设置中设置想要使用的测试单位的 before launch 即可

  9. mysql-5.7.17-winx64免安装版环境配置 问题小记

    安装版问题请自行百度或google 这里总结几个免安装版mysql-5.7.17-winx64配置后,出现问题的解决方法. 具体的环境配置请先参考mysql-5.7.17-winx64免安装版,win ...

  10. javaweb(十)——HttpServletRequest对象(一)

    一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...