tab选项卡

最新推荐文章于 2023-08-10 18:55:59 发布
最新推荐文章于 2023-08-10 18:55:59 发布
阅读量230 收藏
点赞数
分类专栏： 前端 js tab选项卡 文章标签： tab选项卡 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44388435/article/details/86171086
版权
前端 同时被 3 个专栏收录
40 篇文章 2 订阅
订阅专栏
js
11 篇文章 0 订阅
订阅专栏
tab选项卡
1 篇文章 0 订阅
订阅专栏

第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 400px;
            margin: 100px auto;
        }
        .box .header span{
            width: 96px;
            height: 45px;
            line-height: 45px;
            display: inline-block;
            text-align: center;
            cursor: pointer;
            background-color: pink;
        }
        .box .header span.selected1{
            background-color: cyan;
        }
        .content li{
            list-style: none;
            height: 250px;
            background-color: orange;
            display: none;
        }
        .content li.select1{
            display: block;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="header">
        <span class="selected1">体育</span>
        <span>娱乐</span>
        <span>新闻</span>
        <span>综合</span>
    </div>
    <div class="content">
        <ul>
            <li class="select1">我是体育</li>
            <li>我是娱乐</li>
            <li>我是新闻</li>
            <li>我是综合</li>
        </ul>
    </div>
</div>
<script src="common.js"></script>
<script>
    //获取所有的li标签
    var list = document.getElementsByTagName("li");
    //获取所有的span标签
    var spans = document.getElementsByTagName("span");
    //遍历点击事件
    for ( var i = 0;i < spans.length; i++){
        //在点击之前，把索引值保存到span标签
        spans[i].setAttribute("index", i)
        spans[i].onmouseover = function () {
            //1.把所有的span样式全部移除
            for ( var j = 0; j < spans.length; j++){
                spans[j].removeAttribute("class");
            }
            this.className = "selected1";
            //3.获取span的索引值
            var num = this.getAttribute("index");
            //4.先让所有的li全部隐藏
            for ( var k = 0; k < spans.length; k++){
                list[k].removeAttribute("class");
            }
            //5.让当前被点击的span对应的li显示
            list[num].className = "select1";
        }
    }
</script>
</body>
</html>

第二种

样式表

<style>
.center{
            width: 600px;
            height: 500px;
            border: 1px solid #ccc;
            margin: 0 auto;
            background-color: #eee;
        }
        .cen_top{
            width: 600px;
            height: 90px;
        }
        .cen_main {
            width: 600px;
            height: 410px;
            /*overflow: hidden;*/
        }
        .cen_top div{
            width: 25%;
            height: 90px;
            line-height: 90px;
            float: left;
            font-size: 18px;
            text-align: center;
            cursor: pointer;
            font-weight: bold;
        }
        .cen_main div{
            width: 600px;
            height: 410px;
            line-height: 410px;
            text-align: center;
            font-size: 24px
        }
    </style>

主体内容

<div class="center">
    <div id="d1" class="cen_top">
        <div style="background-color: white;">选项卡1</div>
        <div>选项卡2</div>
        <div>选项卡3</div>
        <div>选项卡4</div>
    </div>
    <div id="d2" class="cen_main">
        <div style="background-color: white;color: blue;">选项卡1的正文内容</div>
        <div style="display: none;color: purple;">选项卡2的正文内容</div>
        <div style="display: none;color: deeppink;">选项卡3的正文内容</div>
        <div style="display: none;color: green;">选项卡4的正文内容</div>
    </div>
</div>

js代码

function my$(id){
    return document.getElementById(id);
}


var dvs = my$("d1").getElementsByTagName("div");
    var dvs2 = my$("d2").getElementsByTagName("div");
    for ( var i = 0; i < dvs.length; i++){
        dvs[i].index = i;	//获取索引
        dvs[i].onclick = function () {
            for (var j = 0; j < dvs.length; j++){
            //将所有的改为默认
                dvs[j].style.backgroundColor = "#eee";
                dvs2[j].style.display = "none";
                dvs2[j].style.backgroundColor = "#eee";
            }
            //谁点击就赋给谁
            this.style.backgroundColor = "white";
            dvs2[this.index].style.display = "block";
            dvs2[this.index].style.backgroundColor = "white";
        }
    }
小博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery制作tab选项卡
weixin_44886806的博客
05-18 1720
用jQuery来制作tab的选项卡。 说白了就是切换到别的选项，已简单的例子来说，先写出样式. CSS部分: <style> ul,li{ list-style: none; margin: 0; padding: 0; } .nav { width: 80%; line-height: 48px; background: #f6f8fa; overflow: hidden;
实现tab选项卡的几种方式
小白小白从不日别的博客
04-30 3516
主要讲述了利用JS实现tab栏的几种方式
Tab选项卡
wen0627的博客
09-15 1210
注意看代码顺序，按图片操作下去 1、首先第一步是设置一个div，这个div里放着选项卡的内容，再给这个div设置一个类为tabbox，这个类设置的是tab的宽度、高度、边框、外边距，这些可以根据你自己想要样式自己去设置出来。 2、第二步就是在div里设置内容，在第一个div中设置一个ul标签，ul标签的意思是无序列表，给ul标签设置一个class再设置一个id，到后面需要id来设置js的样式，打完ul标签后打li标签，li标签是用来定义列表中的项目，这里代表开头，在li标签里放上你要选项卡.
tab选项卡功能
飞鱼同学
01-25 464
tab选项卡功能 今天给大家实现一个简单的需求,原生态js实现选项卡切换的效果,即当鼠标移入某个标签时,显示不同的图片。先来看一下效果图： 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tab选项卡功能</title> <style type="text/css"> ul,li{ margin: 0; pa
Tab选项卡的使用
weixin_44538225的博客
07-18 762
Tab选项卡属于导航菜单里面的一种。而导航菜单可以应用于头部或者侧边，而Tab选项卡提供的风干肉多样，还支持响应式，支持删除选项卡等功能。 在一个项目中，也可以应用到这个Tab选项卡，方便也快捷。 好比如上面那个海运系统管理这个项目一样，也是用到了这种带了删除的选项卡实现的功能。 而这个也是用layui插件实现的，这个模块的加载组件则是：element，而这也是使用这个功能必须加载element...
jQuery封装的tab选项卡插件分享
10-24
本文给大家分享的是个人封装的tab选项卡特效的插件，十分的简单实用，附上用法和示例，有需要的小伙伴可以参考下。
AngularJS实现tab选项卡的方法详解
10-19
主要介绍了AngularJS实现tab选项卡的方法,结合实例形式较为详细的分析了AngularJS实现tab选项卡的原理、实现技巧与相关注意事项,需要的朋友可以参考下
Android Tab 选项卡
10-20
Android Tab 选项卡源代码，是一个很不错的Android源码，有兴趣的伙伴们抽时间可以看一下把
jQuery简单实现tab选项卡切换效果
10-22
主要介绍使用jQuery封装了一个tab选项卡切换的插件，需要的朋友可以参考下。
原生js实现tab选项卡切换
10-21
主要为大家详细介绍了原生js实现tab选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
TAB选项卡
csdn_nevermore的博客
01-11 489
TAB选项卡
几种项目中常用的tab选项卡切换
最新发布
qq_43766059的博客
08-10 2013
页面上方循环获取标签信息，超出屏幕宽度时可滑动，点击标签时，下方数据随标签切换，当前选中标签样式改变；页面下方可左右滑动切换，当前展示页面数据与上方标签相对应，要求当前页面高度根据获取数据列表长度改变，当前页面无数据时，按要求展示无数据提示。
LayUI选项卡的使用
liaozhixiangjava的博客
07-13 2262
选项卡（Tab）是计算机界面中常见的一种元素，用于在同一个窗口或应用程序中同时显示多个页面或功能。每个选项卡代表一个独立的页面或功能，用户可以通过点击选项卡来切换不同的内容。通常，选项卡以水平或垂直的方式排列在窗口的顶部或侧边，每个选项卡上通常会显示一个标签，标注该选项卡所代表的内容或功能。当用户点击某个选项卡时，该选项卡的内容会在主窗口中显示，其他选项卡的内容则会被隐藏。选项卡的使用可以提高用户界面的可用性和效率，让用户可以在不打开多个窗口或应用程序的情况下同时访问多个页面或功能。
“Tab选项卡”制作
m0_68002039的博客
04-05 1070
Tab选项卡是指将不同的内容重叠放置在某一布局区块内，重叠的内容区里的每次只有其中一层是可见的，用户通过鼠标点击或移到内容区所对应的标签上，来请求显示该层内容区。
Tab选项卡（js）
qq_39194067的博客
12-22 2747
实现效果与思路 今天来实现一个常用的功能tab选项卡。下图是基本的样式，当点击不同的选项卡标签时会展示不同的选项卡内容。 实现原理是首先给每个选项卡内容都隐藏，当点击选项卡时使其对应的内容显示就实现了tab选项切换的功能。 具体代码实现 1. 样式实现 <style> button{ //选项卡按钮 ...
CSS+JS漂亮的tab选项卡
ICode联盟
07-01 413
下载地址CSS+JS实现的漂亮的tab选项卡，带动画效果的tab切换插件。dd:
制作简易Tab选项卡
hqw200424的博客
09-16 179
1.在DW中新建一个HTML文档写它的代码. 2.给它们一个ulli标签.标签里在给它a标签. 3.还是在给它一个<ulli>标签. 4.在给它最后一个<ulli>标签 5.新建一个css文档写他的样式. 6.接着在给它一个script标签. 7.接着初始预览效果是这样的. 8.在建一个JavaScript文档. 9.接着点击预览即可. ...
react实现tab选项卡
06-10
React实现Tab选项卡可以使用React组件库，也可以自己实现。 以下是使用React自己实现Tab选项卡的示例代码： ```jsx import React, { useState } from 'react'; function Tabs() { const [activeTab, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值