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

用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. Egret 菜鸟级使用手册--第二天

    ################新的一天,我还是大佬 今天加载个英雄,先在GameScene里搞一个英雄出来,然后再创建一个Hreo类 接下来又一个新的API egret.TouchEvent.TOU ...

  2. SpringMVC 中，当前台传入多个参数时，可将参数封装成一个bean类

    在实际业务场景中,当前台通过 url 向后台传送多个参数时,可以将参数封装成一个bean类,在bean类中对各个参数进行非空,默认值等的设置. 前台 url ,想后台传送两个参数,userName 和 ...

  3. 实验2 Windows口令破解

    实验2 Windows口令破解 实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 实验工具 LC5 实验原理 口令破解方法: 口令破解主要有两种方法:字典破 ...

  4. 成都Uber优步司机奖励政策（4月16日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  5. 前后端分离之JWT用户认证zf

    在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了.于是我 ...

  6. weka使用笔记3---classfily API调用

    分类器在数据挖掘中的作用不言而喻,weka中的分类器有很多种类型,但是weka在输出结果中,只输出了一个分类的预测的类型,没有输出分类的得分,有一些不给力.如果想知道得分和其预测的类的话,就得调用we ...

  7. Linux系统基础网络配置老鸟精华篇

    对于linux高手看似简单的网络配置问题,也许要说出所以然来也并不轻松,因此仍然有太多的初学者徘徊在门外就不奇怪了,这里,老男孩老师花了一些时间总结了这个文档小结,也还不够完善,欢迎大家补充,交流.谢 ...

  8. axios封装（二）队列管理

    在某些特定的场景(比如 即时搜索 ,表格分页),会频繁的发起ajax请求,而由于ajax是异步API,所以返回的时序并不能够保证,这时候就需要实现一个ajax队列,在相同的请求发起时,取消处理上一个请 ...

  9. AtCoder Regular Contest 101 D - Median of Medians

    二分答案 然后前缀和+树状数组来判断这个答案是否大于等于数 如果我们对于一个查询,如果小于这个数令为1,大于这个数领为-1 将所有前缀和放在树状数组中,就可以查询所有sum_{l} < sum_ ...

  10. 用Python实现检测视频真伪？

    译者注:本文以一段自打24小时耳光的视频为例子,介绍了如何利用均值哈希算法来检查重复视频帧.以下是译文. 有人在网上上传了一段视频,他打了自己24个小时的耳光.他真的这么做了吗?看都不用看,肯定没有! ...