纯javascript tab切换

最新推荐文章于 2024-07-29 18:19:14 发布
最新推荐文章于 2024-07-29 18:19:14 发布
阅读量230 收藏
点赞数 1
分类专栏： web前端 文章标签： tab切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_14031/article/details/82615362
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style type="text/css">
    *{
     margin:0;
     padding:0;
     list-style:none;
     font-size:12px;
    }
    .tab{
  width:298px;
  height:98px;
  margin:10px;
  border:1px solid #eee;
  overflow:hidden;
 }
 .tab_title{
  height:27px;
  position:relative;
  background:#f7f7f7;
 }
 .tab_title ul{
  position:absolute;
  width:301px;
  left:-1;
 }
 .tab_title li{
  float:left;
  width:58px;
  height:26px;
  line-height:26px;
  text-align:center;
  padding:0 1px;
  border-bottom:1px solid #eee;
  overflow:hidden;
 }
 .tab li a:link,.tab li a:visited{
  text-decoration:none;
  color:#000;
 }
 .tab li a:hover{
  color:#f90;
  font-weight:700;
 }
 .tab_title li.select{
  background:#fff;
  border-botton-color:#fff;
  border-left:1px solid #eee;
  border-right:1px solid #eee;
  padding:0;
 }
 .tab .tab_content .tabct{
  margin:10px 10px 10px 19px;
 }
 .tab .tab_content .tabct ul li{
  float:left;
  width:134px;
  height:25px;
  overflow:hidden;
 }
</style>
<script type="text/javascript">
 function $(id){
  return typeof id=="string"?document.getElementById(id):id;
 }
 window.onload = function(){
  var titleName = $("tab_title").getElementsByTagName("li");
  var tabContent = $("tab_content").getElementsByTagName("div");
  if(titleName.length != tabContent.length){
   return;
  }
  for(var i=0;i<titleName.length;i++){
   titleName[i].id = i;
   titleName[i].onmouseover = function(){
    for(var j = 0;j<titleName.length;j++){
     titleName[j].className="";
     tabContent[j].style.display="none";
    }
    this.className = "select";
    tabContent[this.id].style.display="block";
   }
  }
 }
</script>
</head>
<body>
<div class="tab" id="tab">
 <div class="tab_title"  id="tab_title">
  <ul>
   <li class="select">
       <a href="">公告</a>
   </li>
   <li>
       <a href="">规则</a>
   </li>
   <li>
       <a href="">论坛</a>
   </li>
   <li>
       <a href="">安全</a>
   </li>
   <li>
       <a href="">工艺</a>
   </li>
  </ul>
 </div>
 <div class="tab_content" id="tab_content">
  <div class="tabct" style="display:block">
   <ul>
    <li>
     <a href="" >马云台大激励青年创业0</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
  <div class="tabct" style="display:none">
   <ul>
    <li>
     <a href="">马云台大激励青年创业1</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
  <div class="tabct" style="display:none">
   <ul>
    <li>
     <a href="">马云台大激励青年创业2</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
  <div class="tabct" style="display:none">
   <ul>
    <li>
     <a href="">马云台大激励青年创业3</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
  <div class="tabct" style="display:none">
   <ul>
    <li>
     <a href="">马云台大激励青年创业4</a>
    </li>
    <li>
     <a href="">阿里给每个县长配智库</a>
    </li>
    <li>
     <a href="">2014电商品牌口碑报告</a>
    </li>
    <li>
     <a href="">三八节阿里系福利驾到</a>
    </li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

 

 

iteye_14031
关注
专栏目录
JavaScript tab选项卡切换
猿码互联
05-29 612
函数来处理选项卡按钮的点击事件。函数首先隐藏了所有选项卡内容，然后显示当前选项卡的内容。同时，它还在当前选项卡按钮上添加了一个。下面是一个简单的JavaScript代码示例，展示如何使用tab选项卡来切换内容。此示例中，我们使用了一个。
JavaScript小案例——tab栏切换
weixin_54645034的博客
10-17 4194
本例利用排他思想和自定义属性等知识，灵活运用js技术，本例展示效果比较简单粗糙，仅供参考学习。
原生JavaScript实现一个简单的组件化Tab
超的博客
04-02 4339
Tab相信大家都不会陌生，他算是前端开发中最常见的组件之一。接下来我就跟大家分享一个我用原生JavaScript实现的一个简单的组件化Tab。首先是HTML结构，没什么好说的了吧。&lt;div id="tab1"&gt; &lt;ul class="tab-head"&gt; &lt;li&gt;tab1&lt;/li&gt; &lt;li&gt;tab2&lt;/li
不用JavaScript 纯 CSS Tab 切换
hackchen的专栏
07-22 396
【代码】不用JavaScript 纯 CSS Tab 切换。
JavaScript之tab栏切换
weixin_44827643的博客
06-27 7602
本文主要介绍如何通过JS实现tab栏的切换效果，主要介绍三种方式：1.利用自定义属性；2.利用let关键字；3.利用事件对象1.利用自定义属性此种方法的核心在于给每个tab选项设置一个自定义属性值，然后根据相应的属性值找到对应的内容选项进行显示。代码如下： 2.利用let关键词此种方法相较于第一种更加简单，利用let提供的块作用域特点，直接利用各个选项的索引值即可获取相应的内容进行显示。代码如下： 3.利用事件对象。前两种方法所做出来的tab栏是单一的，若要进行代码的复用，则会出现问题。利用事件对象
JavaScript应用tab切换
m0_48639378的博客
06-28 220
导航页面的切换 二、多个导航的tab切换
JavaScript-tab栏切换
qq_39111074的博客
09-27 7231
tab栏：点击不同的标签，显示不同的内容，被点击的标签样式发生改变（突出选中的是哪一个） 实现思路： 将tab栏分为上下两部分，上面是导航列表，下面是各部分对应的内容。把标签和内容都写出来，内容按照标签顺序依次顺着写，给标签都添加自定义属性- - -index，属性值从0开始，依次增加1 首先实现上面的效果，点击后样式切换，被点击的字体颜色、背景颜色改变等: ①css定义一个类eg：current，里面定义改变后的样式，先给第一个标签写一个该类名，其他的不写类名， ②js获取所有标签元素对象，- - -f
利用JavaScript实现tab页面切换效果
qq_68195068的博客
03-29 486
【代码】利用JavaScript实现tab页面切换效果。
JavaScript实现tab栏切换 jquery实现tab栏切换 的方法的对比
qq_34548883的博客
07-29 775
在工作的项目中经常会遇到tab选项卡这个功能，JavaScript实现tab栏切换 jquery实现tab栏切换 的方法的对比。当然实际工作中我们一般不会这样去写，我们通常会把以此为基础去封装一个可重用的控件，但基本思想不变。
JavaScript 实现 Tab 点击切换
宁宁宁儿的博客
09-30 561
Tab 选项卡切换效果在现如今的网页中，运用的也是比较多的，包括点击切换、滑动切换、延迟切换、自动切换等多种效果，在这篇博文里，我们是通过原生 Jquery来实现 Tab 点击切换的效果 例如： html <body> <div style="position: relative;margin-top: 56px;display: flex;justify-content: space-between;width: 1200px;" id="left"> ..
javascript的tab切换原理与效果实现方法
10-24
JavaScript 的 Tab 切换是一种常见的网页交互效果，它允许用户通过点击或悬停在不同的选项上，来切换显示相应的内容区域。这种效果广泛应用于导航菜单、信息展示等场景，为用户提供了一个简洁且直观的方式来浏览页面...
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
10-21
标题“最简单纯JavaScript实现Tab标签页切换的方式(推荐)”向我们展示了如何仅使用JavaScript代码来实现Tab切换功能，而不需要依赖任何第三方JavaScript库如jQuery。这种方法的优点在于它的简洁性与易用性，适合初学...
基于javascript实现tab切换特效
10-22
主要介绍了基于javascript实现tab切换特效的相关资料,具有一定的参考价值，需要的朋友可以参考下
JavaScript实现tab栏切换效果
10-15
JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计，用于在不同的内容区域之间进行切换，通常用在页面顶部或侧边的导航菜单。在这个例子中，我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...
javascript实现tab切换的两个实例
10-23
- **标签**："JavaScript tab切换"、"JS实现tab切换效果"、"jQuery实现tab切换"、"JS实现tab选项卡切换"，从标签中可以看出，本文内容主要围绕JavaScript在实现Tab切换效果中的应用展开，同时也提到了jQuery库作为...
CPPC++_作为反向代理来保护您的web服务免受攻击和利用.zip
11-12
cppc++
CPPC++_原生macOS HD音频，不支持官方编解码器.zip
11-12
cppc++
Matlab实现黏菌优化算法SMA-TCN-Multihead-Attention多输入单输出回归预测算法研究.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
【SCI2区】基于花朵授粉优化算法FPA优化TCN锂电池健康寿命预测算法研究Matlab实现.rar
最新发布
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值