可多次调用的选项卡

最新推荐文章于 2024-10-04 06:11:34 发布
最新推荐文章于 2024-10-04 06:11:34 发布
阅读量158 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/cell/archive/2008/09/19/1294440.html
版权
ContractedBlock.gif ExpandedBlockStart.gif Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<!--
引用时保留下原创作者喽,尊重任何一位原创作者,促进中国互联网进程
Editor:weasle
http://www.hxcgw.com
Email:weasle@163.com
QQ:112011531
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body,div,ul,li{
padding:0;
text-align:center;
}
body{
font:12px "宋体";
text-align:center;
}
a:link{
color:#00F;
text-decoration:none;
}
a:visited {
color: #00F;
text-decoration:none;
}
a:hover {
color: #c00;
text-decoration:underline;
}
ul{ list-style:none;}
/*选项卡1*/
#Tab1{
width:460px;
margin:0px;
padding:0px;
margin:0 auto;}
/*选项卡2*/
#Tab2{
width:576px;
margin:0px;
padding:0px;
margin:0 auto;}
/*菜单class*/
.Menubox {
width:100%;
background:url(200801081251340.gif);
height:28px;
line-height:28px;
}
.Menubox ul{
margin:0px;
padding:0px;
}
.Menubox li{
float:left;
display:block;
cursor:pointer;
width:114px;
text-align:center;
color:#949694;
font-weight:bold;
}
.Menubox li.hover{
padding:0px;
background:#fff;
width:116px;
border-left:1px solid #A8C29F;
border-top:1px solid #A8C29F;
border-right:1px solid #A8C29F;
background:url(200801081249070.gif);
color:#739242;
font-weight:bold;
height:27px;
line-height:27px;
}
.Contentbox{
clear:both;
margin-top:0px;
border:1px solid #A8C29F;
border-top:none;
height:181px;
text-align:center;
padding-top:8px;
}
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
</head>
<body>
<br><br>
<div id="Tab1">
<div class="Menubox">
<ul>
<li id="one1" onclick="setTab('one',1,4)"  class="hover">新闻1</li>
<li id="one2" onclick="setTab('one',2,4)" >新闻2</li>
<li id="one3" onclick="setTab('one',3,4)">新闻3</li>
<li id="one4" onclick="setTab('one',4,4)">新闻4</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_one_1" class="hover">新闻列表1</div>
<div id="con_one_2" style="display:none">新闻列表2</div>
<div id="con_one_3" style="display:none">新闻列表3</div>
<div id="con_one_4" style="display:none">新闻列表4</div>
</div>
</div>
<br>
<div id="Tab2">
<div class="Menubox">
<ul>
<li id="two1" onclick="setTab('two',1,4)"  class="hover">新闻1</li>
<li id="two2" onclick="setTab('two',2,4)" >新闻2</li>
<li id="two3" onclick="setTab('two',3,4)">新闻3</li>
<li id="two4" onclick="setTab('two',4,4)">新闻4</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_two_1" >新闻列表1</div>
<div id="con_two_2" style="display:none">新闻列表2</div>
<div id="con_two_3" style="display:none">新闻列表3</div>
<div id="con_two_4" style="display:none">新闻列表4</div>
</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/cell/archive/2008/09/19/1294440.html

banditt4548
关注
labview运行中激活选项卡_[转载]labview使用小技巧及按钮与选项卡匹配的方式
weixin_39530149的博客
12-24 1652
一．选项卡控件颜色修改在labview中，常常遇到修改某一个选项卡的问题，这一效果的实现需要调用选项卡的属性节点page，然后在里面将标签页独立，然后可以通过修改FGColor来更改不同选项卡的颜色，具体的后面板程序如下图所示：对于前面板的三个选项卡，这种循环一次的做法用于修改第一个选项卡的背景色为黄色，剩余两个颜色保持不变，那么要修改中间的某一个选项卡的颜色，就需要有条件结构来实现了，当循环到要...
JS-【同页面多次调用】tab选项卡封装
weixin_34221332的博客
02-24 157
这两天遇到一个页面，同一个页面中同一个特效会用好多次，比如tab，比如轮播等。我又不想很不负责任的复制一遍代码，那样页面臃肿，自己心里也堵得慌。于是就想着把代码封装起来多次调用。 对于封装，只在公开课看过一个老师操作，自己也是啥也不懂得。 好歹最后在群里大神的指导下，一步一步的由简致难完善了。就上最后的版本吧，中间的迭代版，，也只是方便以后封装其他的话参...
【JS】可多次使用的jQuery tab选项卡
zuncle的博客
05-22 854
不多说了，看下面的代码吧！<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可多次使用的jQuery tab选项卡代码</title> <style type="text/css"> /*通用样式*
一个页面可以重复调用的TAB选项卡切换js代码 鼠标悬浮
weixin_34090562的博客
05-28 181
/*下面是景点页面的变动代码*/ .tabbox{ height:176px; padding-bottom:10px; } .tabmenu{ height:25px; background:url(../imges/scenery_04.jpg)rightno-repeat; } .tabmenuul{margin:0;paddin...
原生 JS 实现选项卡切换（循环调用绑定事件）
weixin_44570557的博客
02-17 579
在这里插入图片描述
vue中，选中多个选项，并且使其高亮
MtangEr的博客
02-27 1万+
在vue中很常见的就是tab切换，选项卡切换，动态添加类名使选项卡选中高亮，对应内容切换，方法大家应该非常熟悉了， 现在提到一种，可以多选多个选项的，效果如下图 贴上代码 &lt;div class="zxlybox"&gt; &lt;p&gt;请选择领域 &lt;span&gt;（可多选）&lt;/span&gt;&lt;/p&gt; &lt;ul&gt;
MFC基础-选项卡控件
mengxj168的博客
09-16 1389
添加当前模块大概功能的描述，希望不要把所有接口文档写在一个文件中，至少按模块分类。在函数声明中 ，创建一个CDialog类型的指针对象,在cpp中实现窗口初始化。在主对话框 属性 添加 事件处理程序，在函数中根据选项卡切换子对话框。
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
10-23
在JavaScript编程中，实现仿百度风云榜的可重复多次调用的TAB切换选项卡效果是一项常见的需求，尤其在网页设计和交互开发中。这个效果可以让用户通过点击不同的TAB按钮来切换显示不同的内容区域，增强用户体验。下面...
可多次使用的jQuery tab选项卡插件.zip
07-11
在本案例中，"可多次使用的jQuery tab选项卡插件.zip"是一个包含资源的压缩包，提供了可以重复利用的jQuery插件代码，用于创建功能完备、易于定制的选项卡功能。 首先，jQuery是一个轻量级的JavaScript库，简化了...
可多次使用的仿126邮箱选项卡的
10-30
标题中的“可多次使用的仿126邮箱选项卡的”指的是在网页设计中创建的一种仿照126邮箱界面的多选项卡组件。这种组件允许用户在同一页面上使用多个独立的选项卡，每个选项卡对应不同的内容区域，提高了网页的信息组织...
可多次使用的TAB选项卡特效代码
03-20
"可多次使用的TAB选项卡特效代码" 提供了一种高效且可复用的解决方案，帮助开发者创建出吸引用户的界面效果。这个代码库是基于jQuery，一个广泛应用于JavaScript库，以简化DOM操作、事件处理和动画效果。 首先，...
可多次使用的jQuery tab选项卡代码
06-10
本篇文章将详细探讨如何使用可多次使用的jQuery Tab选项卡代码，以及这种实现方式的优势。 首先，我们需要理解jQuery Tab的基本工作原理。通常，Tab选项卡由HTML结构、CSS样式和JavaScript（通常使用jQuery）逻辑三...
Table栏切换
涩的博客
06-24 6786
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可多次使用的jQuery tab选项卡</title> <style ty...
vue 中接口多次重复调用
热门推荐
mark_gsd的博客
06-24 1万+
在代码中发现一个接口总是莫名奇妙的调用多次，一直找不到原因，后来发现是在使用bus的过程中没用调用off方法将对应的事件注销导致的
XHTML 简介
wjs2024的博客
10-04 747
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
毕业设计论文SpringBoot社区老人健康信息管理系统.docx
10-17
毕业设计论文
TEAM-NAVI-Requirements Specification Document
10-17
TEAM_NAVI_Requirements Specification Document
分析流体动力学中的混沌系统-解决混沌系统问题python源码+项目说明（课程作业）.zip
最新发布
10-17
1.多数小白下载后，在使用过程，可能会遇到些小问题，若自己解决不了，请及时私信描述你的问题，我会第一时间提供帮助，也可以远程指导 2.项目代码完整可靠，谈不上高分、满分(多数为夸大其词），但难度适中，满足一些毕设、课设要求，且属于易上手的优质项目，项目内基本都有说明文档，按照操作即可，遇到困难也可私信交流 3.适用人群：各大计算机相关专业行业的在校学生、高校老师、公司程序员等下载使用 4.特别是那种爱钻研学习的学霸，强烈推荐此项目，可以二次开发提升自己。如果确定自己是学渣，拿来作毕设、课设直接用也无妨，但建议自己还是尽可能弄懂项目最好！ 项目名字和项目路径不要用中文，建议解压重命名为英文名字后再运行！项目易上手运行
使用JavaScript实现自动切换选项卡
在网页设计中，选项卡是一种常见的用户界面元素，用于展示多组相关但不同时显示的内容。传统的选项卡切换通常依赖于用户的点击或滑动操作。然而，自动切换的选项卡可以提升用户体验，尤其是在展示动态更新信息或引导...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值