文档章节

JavaScript实现Tab栏切换

liuvanl
 liuvanl
发布于 2017/04/24 20:29
字数 306
阅读 120
收藏 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 开始书写css代码  -->
    <style>
        *{margin:0;padding:0;}
        .box {
            width: 400px;
            height: 350px;
            margin: 0 auto;
        }
        #tab {
            margin-top: 150px;
        }
        .box p {
            height: 40px;
        }
        .box span {
            display: block;
            width: 97px;
            height: 40px;
            float: left;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .current {
            background-color: pink;
        }
        .box div{
            width: 400px;
            height: 260px;
            background: pink;
            display: none;
        }
        .box div.show {
            display: block;
        }
    </style>
    <!-- 开始书写js代码  -->
    <script> 
        window.onload = function (){
            //  使用函数进行封装
            function fn(obj){
                // 获取外面的大盒子
                var target = document.getElementById(obj);
                // 获取大盒子下面的span元素
                var spans = target.getElementsByTagName('span');
                // 获取大盒子下面的div元素
                var divs = target.getElementsByTagName('div');
                // 使用for循环进行遍历
                for(var i=0;i<spans.length;i++){
                    // 获取索引值
                    spans[i].index = i;
                    // 鼠标移上切换相应的内容
                    spans[i].onmouseover = function (){
                        for(var i = 0;i<spans.length;i++){
                            // 大盒子下面的span,div元素的类名为空
                            spans[i].className = '';
                            divs[i].className = '';
                        }
                        // 当前移入的元素加上current类名
                        this.className = 'current';
                        // 给相应的div元素加上show类名
                        divs[this.index].className = 'show';
                    }
                }
            }
            // 调用该函数
            fn('tab');    
        }    
    </script>
</head>
<body>
    <div class="box" id="tab">
        <p>
            <span class="current">新闻</span>
            <span>图片</span>
            <span>娱乐</span>
            <span>星座</span>
        </p>
        <div class="show">新闻栏目</div>
        <div>图片栏目</div>
        <div>娱乐栏目</div>
        <div>星座栏目</div>
    </div>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
liuvanl
粉丝 1
博文 4
码字总数 635
作品 0
巫山
前端工程师
私信 提问
基于adminlte的后台管理系统开发

前言 现在的大前端技术来势凶猛,Vue&React&Angular三足鼎立,让我们这些后端开发人员瑟瑟发抖。为了开发一个内部使用的管理系统需要去学习Node&Webpack等各种新概念,况且我们的系统并没有那...

gongxufan
2018/06/21
0
0
tab页签切换----bootstrap

关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a></li> <li><a h......

freedonn
2014/11/07
0
0
求大神指点 HTML tab切换

想在一个网页上实现多个tab标签页,点击即可切换,试了无数次都无法实现想要的效果,谷歌搜了N多,改了不下百次,还是没找到原因,求指点,不甚感激! 想要实现的效果:四个tab标签页,默认显...

stableman
2014/03/24
2.4K
6
VS2008(C#)制作网页Tab标签切换方法(二)

VS2008(C#)制作网页Tab标签切换方法(二)——JavaScript实现 使用JavaScript脚本代码,实现Tab标签切换 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tab_JScript.aspx.cs" I......

长平狐
2013/01/06
69
0
RonCoo AdminLTE v1.1.0 版本更新

RonCoo AdminLTE --是一个完全响应式的免费开源后台管理模板。基于 AdminLTE 框架(后续会随着版本更新而更新);使用jQuery 2.2.3版本,并引入很多优秀的第三方jQuery插件,开发者也可以改用...

一只菜鸟
2017/01/03
2.5K
9

没有更多内容

加载失败,请刷新页面

加载更多

JavaEE开发的颠覆者SpringBoot实战摘要笔记

一、注解理解 1.spring注解 1)@Configuration/@ComponentScan/@Bean注解实现java方式的配置。 @Configuration代替xml文件 @ComponentScan指定扫描范围 @Bean代替bean标签 2)@Bean、@Componen...

啃不动地大坚果
19分钟前
2
0
跨链技术的分析和思考

当前的区块链底层技术平台百花齐放,不同的业务、不同的技术底层的区块链之间缺乏统一的互联互通的机制,这极大限制了区块链技术和应用生态的健康发展。跨链的需求由此而来,本文通过分析几种...

Tiny熊
21分钟前
0
0
使用css预处理器sass轻松生成margin、padding四个方向多个值的css样式代码

直接在scss文件上复制这段scss代码: $directions:("t":"top", "b":"bottom", "l":"left", "r":"right");$dimensions:("p":"padding", "m":"margin");//获取padding margin间隔@each $......

祖达
39分钟前
0
0
gearman安装,提示错误:configure: error: could not find boost

背景及最终解决方案 在CentOS 7上安装gearman时,提示错误:configure: error: could not find boost,最终解决方案是: 先安装: # yum install -y boost boost-devel 发现问题还是没解决,...

暗夜在火星
45分钟前
2
0
NFS服务

问题1: A机器上传了一张图片,结果B机器访问的时候就提示404. NFS,Network File System。网络文件系统,即通过网络,对在不同主机上的文件进行共享。 NFS最早由Sun公司开发,分2,3,4三个...

wzb88
46分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部