js实现点击tab标签切换

最新推荐文章于 2024-06-28 13:48:05 发布
最新推荐文章于 2024-06-28 13:48:05 发布
阅读量1.3k 收藏
点赞数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>点击切换选项卡代码</title>

<style type="text/css">

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.tab1{width:401px;border-top:#cccccc solid 1px;border-bottom:#cccccc solid 1px;margin:50px auto 0 auto;}

.menu{height:28px;border-right:#cccccc solid 1px;}

.menu li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#cccccc solid 1px;color:#666;font-size:14px;overflow:hidden;background:#E0E2EB;}

.menu li.off{background:#FFFFFF;color:#336699;font-weight:bold;}

.menudiv{height:200px;border-left:#cccccc solid 1px;border-right:#cccccc solid 1px;border-top:0;background:#fefefe}

.menudiv div{padding:15px;line-height:28px;}

</style>

<script type="text/javascript">

function setTab(name,cursel){

 cursel_0=cursel;

 for(var i=1; i<=links_len; i++){

  var menu = document.getElementById(name+i);

  var menudiv = document.getElementById("con_"+name+"_"+i);

  if(i==cursel){

   menu.className="off";

   menudiv.style.display="block";

  }

  else{

   menu.className="";

   menudiv.style.display="none";

  }

 }

}

function Next(){

 cursel_0++;

 if (cursel_0>links_len)cursel_0=1

 setTab(name_0,cursel_0);

}

var name_0='one';

var cursel_0=1;

var ScrollTime=3000;//循环周期（毫秒）

var links_len,iIntervalId;

onload=function(){

 var links = document.getElementById("tab1").getElementsByTagName('li')

 links_len=links.length;

 for(var i=0; i<links_len; i++){

  links[i].onmouseover=function(){

   clearInterval(iIntervalId);

   this.onmouseout=function(){

    iIntervalId = setInterval(Next,ScrollTime);;

   }

  }

 }

 document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){

  clearInterval(iIntervalId);

  this.onmouseout=function(){

   iIntervalId = setInterval(Next,ScrollTime);;

  }

 }

 setTab(name_0,cursel_0);

 iIntervalId = setInterval(Next,ScrollTime);

}

</script>

</head>

<body>

<div class="tab1" id="tab1">

 <div class="menu">

  <ul>

   <li id="one1" onclick="setTab('one',1)">首页</li>

   <li id="one2" onclick="setTab('one',2)">点击看看</li>

   <li id="one3" onclick="setTab('one',3)">会自动的</li>

   <li id="one4" onclick="setTab('one',4)">我的网站</li>

  </ul>

 </div>

 <div class="menudiv">

  <div id="con_one_1">我的网站</div>

  <div id="con_one_2" style="display:none;">JS代码,导航菜单</div>

  <div id="con_one_3" style="display:none;">看到效果了吗？？？</div>

  <div id="con_one_4" style="display:none;">我的网站我做主</div>

 </div>

</div>

<div style="text-align:center;clear:both;"></div>

</body>

</html>

qq_42313935
关注
JavaScript实现tab栏切换效果
10-15
主要为大家详细介绍了JavaScript实现tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript标签栏切换效果
12-14
JavaScript标签栏切换效果，用jvascript实现的标签栏切换
JavaScript实现Tab切换
01-08 264
在网页开发中，常常会遇见很多Tab切换，Tab切换增加网页浏览的舒适性，对于开发人员特别常见，本文使用JS实现tab切换效果，仅对学习中遇到的知识点做一个总结。 效果图如下： 实现思路： 1.首先使用HTML和CSS构建静态网页如上，标题使用ul-li标签，有浮动，主体使用四个大小一样的盒子，不添加JS时候，盒子竖直排列（很丑很丑） 2.添加JS代码 　　2.1 首先...
墨刀原型--多tab切换显示对应页面场景交互步骤
最新发布
niuniu_666的博客
06-28 1224
实现点击tab或状态选项，切换至对应的页面，实现正常交互
js中常用的Tab切换
duenyang的博客
08-12 446
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>tabtitle> style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px;
JS实现Tab内容切换，页面不刷新，内容切换，网址变化
07-05
JS实现Tab内容切换，页面不刷新，内容切换，网址对应变化，效果非常好。
js实现的tab标签切换效果代码分享
11-23
这里我们介绍一个基于纯JavaScript实现的Tab标签切换效果，无需依赖jQuery库，使得网页的加载速度更快，同时也降低了依赖性。 首先，我们来看HTML结构： ```html <!--tag标题--> <li><a href="#" class=...
js(JavaScript)实现TAB标签切换效果的简单实例
10-26
总结起来，这个JavaScript实现的TAB标签切换效果主要依赖于JavaScript事件处理和DOM操作，结合CSS样式实现了动态的交互效果。对于初学者来说，理解这个实例有助于提升对JavaScript控制页面元素能力的理解，同时也...
js实现点击切换TAB标签实例
10-23
JavaScript中实现点击切换TAB标签主要依赖于鼠标点击事件。在上述实例中，"menu"元素通常绑定的是点击事件，用来触发切换操作。通过为每个"menu"元素绑定点击事件处理函数，当用户点击时，JavaScript代码会被执行，...
简单纯js实现点击切换TAB标签实例
10-23
知识点一：什么是选项卡（Tab）标签切换效果？...在编码阶段，则需要根据设计要求，将本例的代码逻辑与网站的其他功能模块相结合，确保tab标签切换效果既符合设计需求，又能与网站其他部分协调工作。
React-Native 实现点击Tab标签切换Tab页面
07-29
本教程将详细介绍如何使用React-Native中的TabBar组件来实现点击Tab标签切换Tab页面的功能。 首先，我们需要了解React-Native的基础知识。React-Native是由Facebook开发的一个开源框架，它允许开发者使用JavaScript...
简单的JS菜单TAB切换
01-28
简单的横向JS菜单TAB切换，无需调用JQUERY，支持所有浏览器。
JS的tab栏切换
qq_42654348的博客
06-14 139
JS的tab栏切换
js 选项卡 Tab切换
全易
10-13 318
首先引入bootstrap3哦 html： <div id="case"> <div class="container"> <div class="title text-center" style="margin-bottom: 40px;"> <h1>合作案例</h1> ...
使用JS来实现tab栏切换
weixin_64965154的博客
05-28 3657
我们这里使用的是：document.querySelectorAll，因为要我们直接获取全部的a标签，所以我们写这个会更好，然后我们需要遍历这个a，运用到for循环。然后我们如果选择第一个，那么我们第二个就不会显示出来，所以我们选择第一个的时候得干掉第二个，这时候我们就可以使用这行代码。这是我今天从学习的知识点，今天试着做了一个tab栏切换，学到很多的知识点，讲师也比学校的老师讲的更加详细明白。这里的意思是我们每选择一个那么我们就会增加一个元素，而前面经过后就会消除掉。
js-tab选项卡切换
wamztkn的博客
04-21 632
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
JS实现tab栏的切换
kumayato的博客
05-11 522
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin: 0px;padding: 0px;} #box{ margin: 50px auto; width:40
JavaScript 实现 Tab 点击切换
宁宁宁儿的博客
09-30 552
Tab 选项卡切换效果在现如今的网页中，运用的也是比较多的，包括点击切换、滑动切换、延迟切换、自动切换等多种效果，在这篇博文里，我们是通过原生 Jquery来实现 Tab 点击切换的效果 例如： html <body> <div style="position: relative;margin-top: 56px;display: flex;justify-content: space-between;width: 1200px;" id="left"> ..
JavaScript之tab栏切换
weixin_44827643的博客
06-27 7504
本文主要介绍如何通过JS实现tab栏的切换效果，主要介绍三种方式：1.利用自定义属性；2.利用let关键字；3.利用事件对象1.利用自定义属性此种方法的核心在于给每个tab选项设置一个自定义属性值，然后根据相应的属性值找到对应的内容选项进行显示。代码如下： 2.利用let关键词此种方法相较于第一种更加简单，利用let提供的块作用域特点，直接利用各个选项的索引值即可获取相应的内容进行显示。代码如下： 3.利用事件对象。前两种方法所做出来的tab栏是单一的，若要进行代码的复用，则会出现问题。利用事件对象
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值