各种选项卡

最新推荐文章于 2022-03-08 10:33:34 发布
最新推荐文章于 2022-03-08 10:33:34 发布
阅读量533 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u014330950/article/details/72821715
版权

这个合上那个打开

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript"  >
function openP(_id)
{
var select_id = parseInt(_id.replace("box",""));
for (i=1;i<=4;i++)
{
if (i==select_id)
{
document.getElementById("box"+i).style.display = "block";
}
else
{
document.getElementById("box"+i).style.display = "none";
}
}
}
</script>
</head>

<body>


<div class="dalei"  οnclick="openP('box1')">22222</div>
<div class="xiaolei" id="box1" style="display:none">
<ul>

<li>>> 222</li><li>>> 222</li><li>>> 222</li>

</ul>
</div>

<div class="dalei"  οnclick="openP('box2')">333</div>
<div class="xiaolei" id="box2" style="display:none">
<ul>

<li>>> 222</li><li>>> 333</li><li>>> 333</li>

</ul>
</div>


</body>
</html>

好的选项卡

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>我的滑动门</title>
<style type="text/css">
.nTab{
float: left;
width: 100%;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
font-size: 12px;
text-align: center;
margin: 0;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}
</style>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
   thisObj.className = "active"; 
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
   tabList[i].className = "normal"; 
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
} 
}
</script>
</head>
<body>
<br />
<br />
<div align="center" style="padding-left:25px;">
<!-- 选项卡0开始 -->
<div class="nTab">
    <!-- 标题开始 -->
    <div class="TabTitle">
      <ul id="myTab0">
        <li class="active" οnmοuseοver="nTabs(this,0);">全部</li>
        <li class="normal" οnmοuseοver="nTabs(this,1);">日志</li>
        <li class="normal" οnmοuseοver="nTabs(this,2);">咨询</li>
        <li class="normal" οnmοuseοver="nTabs(this,3);">相册</li>
        <li class="normal" οnmοuseοver="nTabs(this,4);">商城</li>
        <li class="normal" οnmοuseοver="nTabs(this,5);">社区</li>
      </ul>
    </div>
    <!-- 内容开始 -->
    <div class="TabContent">
      <div id="myTab0_Content0"> 000 </div>
      <div id="myTab0_Content1" class="none">111</div>
      <div id="myTab0_Content2" class="none">222</div>
      <div id="myTab0_Content3" class="none">333</div>
      <div id="myTab0_Content4" class="none">444</div>
      <div id="myTab0_Content5" class="none">555</div>
    </div>
</div>
<!-- 选项卡0结束 -->
<!-- 选项卡1开始 -->
<div class="nTab" style=width:288px>
    <!-- 标题开始 -->
    <div class="TabTitle">
      <ul id="myTab1">
        <li class="active" οnclick="nTabs(this,0);">aaa</li>
        <li class="normal" οnclick="nTabs(this,1);">bbb</li>
        <li class="normal" οnclick="nTabs(this,2);">ccc</li>
        <li class="normal" οnclick="nTabs(this,3);">单击</li>
      </ul>
    </div>
    <!-- 内容开始 -->
    <div class="TabContent">
      <div id="myTab1_Content0"> 000 </div>
      <div id="myTab1_Content1" class="none"> 111 </div>
      <div id="myTab1_Content2" class="none"> 222 </div>
      <div id="myTab1_Content3" class="none"> 333 </div>
    </div>
</div>
<!-- 选项卡1结束 -->
</div>
</body>
</html>

滑动门图片也换的

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

<img src="images/xia/topb1.gif"  οnmοusemοve=topconb(1) id=imgb1 name=imgb1/>
<img src="images/xia/topb22.gif"  οnmοusemοve=topconb(2) id=imgb2 name=imgb2/>

<DIV id=topb1 style="MARGIN: 0px 0px; WIDTH: auto; HEIGHT: auto; TEXT-ALIGN: center">
1111111
</DIV>
<DIV id=topb2   style=" display: none;MARGIN: 0px 0px; WIDTH: auto; HEIGHT: auto; TEXT-ALIGN: center">
	222222
</DIV>
	
	<SCRIPT language=javascript>
	var cnow=1;
	function topconb(ctnumb)
	{
	var cnumb;
	var cobj1,cobj2
	cobj1=document.getElementById("topb1");
	cobj2=document.getElementById("topb2");
	num=ctnumb;	
	
	  if(cnow!=cnumb)
	  {
	  cobj1.style.display="none";
	  cobj2.style.display="none";
	

	  document.getElementById("topb"+num).style.display="block";	  
	  
	  document.getElementById("imgb1").src="images/xia/topb12.gif";
	  document.getElementById("imgb2").src="images/xia/topb22.gif";
	
	  
	  document.getElementById("imgb"+num).src="images/xia/topb"+num+".gif";
	  now=num;
	  }
	}	
</SCRIPT>
  
</body>
</html>

Tips展开关闭问答代码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<SCRIPT>
function show(c_Str,imgg)
{if(document.all(c_Str).style.display=='none')
{document.all(c_Str).style.display='block';
document.all(imgg).src='http://www.lanrentuku.com/down/js/images/12493937251.gif'}
else{document.all(c_Str).style.display='none';
document.all(imgg).src='http://www.lanrentuku.com/down/js/images/12493937250.gif'}}
</SCRIPT>
</head>
<body>
<p οnclick='show("tip1","img1")'><IMG id=img1 hspace=1 src="http://www.lanrentuku.com/down/js/images/12493937250.gif" align=absMiddle  border=0>问题一</p>
<p id=tip1  style="DISPLAY: none;">答案一</p>
<p οnclick='show("tip2","img2")'><IMG   id=img2 hspace=1 src="http://www.lanrentuku.com/down/js/images/12493937250.gif" align=absMiddle  border=0>问题二</p>
<p id=tip2  style="DISPLAY: none;">答案二</p>
<p οnclick='show("tip3","img3")'><IMG  id=img3 hspace=1 src="http://www.lanrentuku.com/down/js/images/12493937250.gif" align=absMiddle  border=0>问题三</p>
<p id=tip3  style="DISPLAY: none;">答案三</p>
</body>
</html>


简洁实用JavaScript Tab滑动门选项卡特效
yzlghb520的专栏
09-18 1680
这是一款简洁实用JavaScript tab滑动门 选项卡特效 把 onclick="nTabs(this,0) 变成 onmouserover="nTabs(this,0),可以做一个鼠标放上去就换内容的效果！ 转自：JS特效 代码如下 简洁TAB选项卡-JS选项卡www.iiwnet.com function nTabs(thisObj, N
制作一个选项卡功能
weixin_46410264的博客
05-09 265
制作一个选项卡功能，点击标题出现与之对应的内容； 参考图： 代码参考： HTML文件： <body> <div id="head" class="head"> <ul> <li onclick="Option(1)">选项卡一</li> <li onclick="Option(2)">选项卡二</li> <li onclick="Option(3)">选项
选项卡功能的实现
m0_62728880的博客
12-10 1056
在许多浏览器界面及应用中，都会涉及到选项卡功能，通过点击导航框中的选项按钮，显示出对应的页面内容，今天我给大家提供了一个运用原生js实现的选项卡效果，大家可以学习和参考。 CSS部分 * { padding: 0; margin: 0; } .all { width: 500px; height: 300px; borde...
js,li形式的选项卡，点击显示不同的div
sunling的专栏
11-18 7838
练习了一上午，一直在获取元素上出错误，最终还是弄好了     Home   -->      *{     margin:0;     padding: 0;   }   #box{     width: 410px;     display: block;   }   ul{     list-style: none;     float:
ul li 变成块状选项卡
JarryLiu 的专栏
04-08 2084
.menu1{ border:1px solid #CCCCCC; height:40px;} .menu1 ul { margin:0px; list-style:none; padding:0px;} .menu1 ul li{ float:left; height:40px; line-height:40px;text-align:center; background:#F3F3F3; ma
各种选项卡封装
01-31
在“各种选项卡封装”中，这通常意味着我们需要编写JavaScript代码来处理点击事件，切换显示的内容，并可能添加动画效果以增强用户体验。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画等...
各种选项卡效果
08-29
以下是对"各种选项卡效果"的详细解读： 1. **静态选项卡**：最基础的选项卡效果，标签和内容面板是固定的，用户点击一个标签，对应的面板就会显示出来，其他面板隐藏。这种效果适用于内容较少且不经常变动的情况。 ...
选项卡切换_labview选项卡切换_Labview界面切换_labview_labview选项卡_
09-30
标题“选项卡切换_labview选项卡切换_Labview界面切换_labview_labview选项卡”表明我们要讨论的是LabVIEW中的选项卡切换技术，这通常涉及到如何在LabVIEW程序中实现不同界面或工作空间之间的平滑过渡。 描述中提到...
Android底部选项卡各种实现Demo
05-10
"Android底部选项卡各种实现Demo" 是一个集成了多种实现方式的示例项目，旨在帮助开发者了解并掌握如何在Android应用中实现在底部显示的选项卡功能。下面我们将详细探讨几种常见的实现方法。 1. **使用Material ...
完美实现js选项卡切换效果(二)
10-20
本文主要讲解了如何...在实际应用中，这样的代码可以用于各种选项卡切换场景，如产品展示、网站导航、信息分类等。通过实践和修改代码，开发者可以掌握更多关于DOM操作、事件处理和定时器使用等JavaScript编程技巧。
最简洁实用的tab切换，tab选项卡
xllily11的袅袅
03-05 297
/*===========所有 tab选项卡 更换显示样式=====================*/          function setTab(m,n){         var tli=document.getElementById("menu"+m).getElementsByTagName("span");         var mli=document.g...
滑动选项卡
cnceohjm的专栏
10-29 723
我的滑动门.nTab{float: left;width: 100%;margin: 0 auto;border-bottom:1px #AACCEE solid;background:#d5d5d5;background-position:left;background-repeat:repeat-y;margin-bottom:2px;}.nTab .TabTitle{clear: both;
HTML+CSS实现的入门选项卡
qq_38967576的博客
06-16 1万+
        直接进入主题，实现一个最基本入门的选项卡，采用HTML+CSS的方式制作，关于这个我觉得最核心的就是页面载入时候对ul标签下的Li元素添加事件，比如选中选项卡一的时候内容一显示，内容二display:none即不显示就好了;还有我觉得比较重要的要用Float属性，往左浮动。（最终效果图）首先上界面代码：    &lt;div&gt;         &lt;ul&gt;      ...
js 函数 实现导航选项卡功能
mashuaimamaphp的专栏
07-13 594
<br />     js 实在是做web特效的好东西，通过这个选项卡可以在一个网页载入大量的内容 ，函数具体如下：<br /><script type="text/javascript"><br /><br />function nTabs(thisObj,Num){<br /><br />if(thisObj.className == "active")return;//  classname 属性可以取得对象的class 值<br /><br />var tabObj = thisObj.parent
又一款兼容性好的TAB标签选项卡(CSS+JS)
weixin_33729196的博客
02-19 155
代码简介： 兼容IE7、IE8、FF等主流浏览器的多标签选项卡，基于CSS+JS技术实现，简洁漂亮，千万不要错过，本选项卡是大网站扒下的，而且好多网站都有用过，绝对值得收藏的一款点触式滑动门。 代码内容： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm...
Layui-选项卡
weixin_54668937的博客
03-08 3878
Layui-选项卡 文献种类：专题技术文献； 开发工具与关键技术： VS、JS 作者：方建恒 ；年级：20级 ；撰写时间： 2022 年 3 月 8日 在一些网页的制作中，往往会用到选项卡切换的功能， 今天我们就来了解一下如何运用Layui的选项卡组件。 首先我们要把layui的js和css引入，如图： 接下来是HTML部分： 我们用ul标签把选项卡的头部包裹起来， 再用div标签把选项卡的内容包裹起来，如图： 接下来是script部分： 因为tab组件依赖于element组件，所
[前端] html+css+javascript 实现选项卡切换效果
热门推荐
童凌的技术博客
03-28 4万+
用html+css+js实现选项卡切换效果使用之前学过的综合知识，实现一些新闻门户网站上的常见选项卡效果：文字素材: 房产： 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简
三种简洁的Tab导航选项卡
weixin_34315485的博客
08-07 163
Code<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><meta...
掌握JavaScript选项卡功能实现技巧
### JavaScript实现选项卡功能知识点详解 选项卡（Tab）功能是前端界面设计中常见的一种交互元素，它允许用户在不同的内容区域之间快速切换，而不需要离开当前页面。使用JavaScript来实现选项卡功能可以提供更加...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值