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-23
主要介绍了javascript实现tab切换的四种方法，并且对每个方法进行了评价，感兴趣的小伙伴们可以参考一下
js根据不标题切换对应内容
nuanpang的博客
05-13 125
<script> //切换 function setHover(name, cursel, n) { for (i = 1; i <= n; i++) {//循环变量 n是总共的切换数量 var menu = document.getElementById(name + i);//menu取出各个标题li的id值 var con = document.getElementById("con_" + name + "_" + i);//con是指内容里的id.
墨刀原型--多tab切换显示对应页面场景交互步骤
最新发布
niuniu_666的博客
06-28 1279
实现点击tab或状态选项，切换至对应的页面，实现正常交互
JavaScript对tab栏切换的常用几种方法
weixin_61683893的博客
04-11 3713
【代码】JavaScript对tab栏切换的常用几种方法。
JavaScript之tab栏切换
weixin_44827643的博客
06-27 7505
本文主要介绍如何通过JS实现tab栏的切换效果，主要介绍三种方式：1.利用自定义属性；2.利用let关键字；3.利用事件对象1.利用自定义属性此种方法的核心在于给每个tab选项设置一个自定义属性值，然后根据相应的属性值找到对应的内容选项进行显示。代码如下： 2.利用let关键词此种方法相较于第一种更加简单，利用let提供的块作用域特点，直接利用各个选项的索引值即可获取相应的内容进行显示。代码如下： 3.利用事件对象。前两种方法所做出来的tab栏是单一的，若要进行代码的复用，则会出现问题。利用事件对象
JS——利用JS实现 tab 切换详解
Bonsoir777的博客
08-27 3511
本文主要介绍如何利用 js 实现tab栏的切换效果
js实现点击切换TAB标签实例
10-23
JavaScript中实现点击切换TAB标签主要依赖于鼠标点击事件。在上述实例中，"menu"元素通常绑定的是点击事件，用来触发切换操作。通过为每个"menu"元素绑定点击事件处理函数，当用户点击时，JavaScript代码会被执行，...
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
知识点一：什么是选项卡（Tab）标签切换效果？...在编码阶段，则需要根据设计要求，将本例的代码逻辑与网站的其他功能模块相结合，确保tab标签切换效果既符合设计需求，又能与网站其他部分协调工作。
JavaScript实现tab栏切换效果
10-15
这个简单的 JavaScript 实现依赖于元素的索引和类名的管理，使得用户可以通过点击 Tab 标签轻松切换页面内容。这种功能在很多网页应用中都很常见，例如产品介绍、用户设置、数据统计等场景。 总的来说，这个示例...
简单的JS菜单TAB切换
01-28
简单的横向JS菜单TAB切换，无需调用JQUERY，支持所有浏览器。
使用JS来实现tab栏切换
weixin_64965154的博客
05-28 3661
我们这里使用的是：document.querySelectorAll，因为要我们直接获取全部的a标签，所以我们写这个会更好，然后我们需要遍历这个a，运用到for循环。然后我们如果选择第一个，那么我们第二个就不会显示出来，所以我们选择第一个的时候得干掉第二个，这时候我们就可以使用这行代码。这是我今天从学习的知识点，今天试着做了一个tab栏切换，学到很多的知识点，讲师也比学校的老师讲的更加详细明白。这里的意思是我们每选择一个那么我们就会增加一个元素，而前面经过后就会消除掉。
JavaScript小案例——tab栏切换
weixin_54645034的博客
10-17 4127
本例利用排他思想和自定义属性等知识，灵活运用js技术，本例展示效果比较简单粗糙，仅供参考学习。
通过JavaScript实现tab切换
weixin_54043141的博客
09-01 1702
在Web开发中，Tab切换是一个常见的功能，它允许用户在不同的页面部分之间进行切换。下面是一个使用JavaScript实现Tab切换的案例，我将详细描述如何实现这个功能。
点击Tab标签切换不同查询数据,并选择数据存入缓存实现两个界面带参数跳转
路飞船长的博客
12-12 1782
在不同的tab标签页中点击不同的标签页查找不同的内容,然后选中其中一个页面中的一条数据将此数据某个信息选中然后存入session缓存当中然后另一个界面从session中取出,从而达到带参数跳转界面的需求。
JS 中实现 tab栏切换的两种方式
qq_45259815的博客
08-27 1537
JS 中切换 tab栏的方法，用面向过程与面向对象的方式各实现
块元素居中方式
gklcsdn的博客
12-10 833
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
tab标签点击切换不同内容js2种实现方式：利用隐藏条件tabs[i] items[i] 一 一对应顺序相同实现、利用setAttribute/getAttribute实现
*
01-01 657
1）优化实现:利用隐藏条件实现 js代码： tab优化版： 找到所有标签:tabs 找到所有内容:items 点击当前标签tabs[i]时: 3.1 先把所有tabs样式类为置空，再把当前tab样式类名置为current 即:所有tabs[i].style.className=’’,再把当前tabs[i].className=‘current’, 3.2 同时:找到对应itemsi： 置item[i].style.display=‘block’,其它置none // 先 找到所有标签元素 va.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值