使用CSS隐藏所有tab页，然后使用JavaScript给选中的元素对应ID的tab页设置class="active"类来显示该元素，以此实现tab切换。

如鼠标放置到shwww时，其data-id对应的属性为#cate1，然后使用选择器选中该id对应的元素并设置类属性，完整demo代码如下：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<style>

    .tab-index, .tab {

        list-style: none;

    }

    .tab-index li {

        display:inline-block;

        border: 1px black solid;

    }

    /* 先隐藏所有的tab标签元素 */

    .tab ul {

        display: none;

    }

    /* 显示激活的（class='active'）tab标签 */

    .tab .active {

        display: block;

    }

</style>

<!-- tab标签 -->

<ul class="tab-index">

    <li data-id="#cate1">shwww</li>

    <li data-id="#cate2">warchina</li>

    <li data-id="#cate3">ldf</li>

</ul>

<!-- 详细内容 -->

<div class="tab">

    <ul id="cate1">

        <li>https://www.shwww.net</li>

    </ul>

    <ul id="cate2">

        <li>http://www.warchina.com</li>

    </ul>

    <ul id="cate3">

        <li>https://www.ldfldf.com</li>

    </ul>

</div>

<script>

    // 页面加载时，选中第一个元素并为其设置 class="active" ，使第一个元素可以显示

    document.querySelector('.tab ul:first-child').setAttribute('class', 'active'

    );

    // 响应事件，鼠标移动或者点击元素时的事件处理函数

    const eventHandler = function (event) {

        document.querySelector('.tab .active').removeAttribute('class'); // 先将之前显示的标签隐藏

        const targetId = event.target.dataset['id']; // 取得需要显示的tab的 id

        document.querySelector(targetId).setAttribute('class', 'active'); // 显示该id的tab标签

    };

    const elements = document.querySelectorAll('.tab-index li'); // 选中所有需要绑定响应事件的元素

    for (let i = 0; i < elements.length; i++) {

        elements[i].addEventListener('mouseover', eventHandler);  // 绑定事件处理函数

    }

</script>

</body>

</html>

JavaScript CSS 实现简单的 TAB 标签切换的更多相关文章

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

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

  2. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  3. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  4. Bootstrap——设置Tab标签切换

    最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...

  5. Vue指令：v-for的用法；v-bind绑定class的几种写法；tab标签切换

    一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...

  6. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  7. 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  8. tab标签切换（无炫效果，简单的显示隐藏）

    从最简单的效果开始写起,一个简单的JQ写出tab切换效果,很静态,没有任何的轮转特效,单纯的点击标签显示区域块. 附上代码: HTML: <div class="wrapper&quo ...

  9. 很好用的Tab标签切换功能，延迟Tab切换。

    一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...

随机推荐

  1. SPOJ 1811LCS Longest Common Substring

    后缀自己主动机裸题.... Longest Common Substring Time Limit: 2000MS   Memory Limit: Unknown   64bit IO Format: ...

  2. 基于DPI（深度报文解析）的应用识别2------实际分析

    新浪微博的分析 早上刚刚起床先刷微博,打算就分析一下新浪微博.登陆之后抓取公布微博的数据包.进行分析. 1.抓包的要点: 1.关闭其它网络应用,保证本机网络流量的干净,便于分析. 2.先开启wires ...

  3. Fitnesse Page 简单使用

    more information- http://www.fitnesse.org/FitNesse.UserGuide 1.1   Edit 点击该按钮,则可以开始编辑(如果该按钮没有出现,则这个页 ...

  4. 多人即时战斗游戏服务端系列[2]--90坦克Online游戏对象介绍以及渲染机制

    先上类图,略大,点击此处放大: 1.先说下方接口 1.1 场景物品接口 ISceneObject : OpLog.IOpItem, IStackPoolObject 全部场景对象的基本接口,包含类型定 ...

  5. Windows 10家庭版也能共享打印机（中）解除Guest账户网络登录限制，实现局域网共享

    由于Windows系统默认是禁止Guest账户从网络登录的.我们须要解除这个限制.首先想到的是用组策略编辑器gpedit.msc. 可是Windows 10家庭版没有组策略编辑器,我们先尝试用U盘把W ...

  6. luogu1967 货车运输 最大瓶颈生成树

    题目大意 给出一张图,给出q对点,求这两个点间权值最小边最大的路径,输出这个最小边权. 题解 我们先一条一条边建图.当建立的边使得图中形成环时,因为环中的每个节点只考虑是否连通和瓶颈大小,要想互相连通 ...

  7. identity in sql server 批量插入history

    https://stackoverflow.com/questions/1920558/what-is-the-difference-between-scope-identity-identity-i ...

  8. ES shrink ——一般是结合rollover一起使用的，一开始没有看懂官方shrink文档，当看了这个之后就明白了

    rollover Elasticsearch 从 5.0 开始,为日志场景的用户提供了一个很不错的接口,叫 rollover.其作用是:当某个别名指向的实际索引过大的时候,自动将别名指向下一个实际索引 ...

  9. B1237 [SCOI2008]配对 贪心 + dp

    我刚开始,我打眼一看:哇!网络流大水题,直接费用流板子,建边跟zz一样.结果看了一眼数据范围...gg,luogu上只能得30,直接建边就是n^2,1e5根本过不了.咋办,只能另谋出路.想不出来,看题 ...

  10. 前端总结·基础篇·CSS

    前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  ...