动态选项卡

最新推荐文章于 2021-03-21 04:32:08 发布
最新推荐文章于 2021-03-21 04:32:08 发布
阅读量518 收藏
点赞数
文章标签： class border div function xhtml go
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiongloveshi/article/details/5633309
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡</title>
<style type="text/css">
<!--
* { margin:0; padding:0; font-size:12px; font-weight:normal; }
.jj  { font-weight:bolder!important; }
.box { border-top-color:#c00!important; }
.pr { color:#060!important; }
#tab01 { position:relative; width:336px; height:88px; padding-top:15px; margin:50px; overflow:hidden; }
#tab01 h3 { position:relative; z-index:2; float:left; height:14px; padding:0 7px 0 8px; margin-left:-1px; border-left:solid 1px #ccc; border-right:solid 1px #fff; text-align:center; background:#fff; cursor:pointer; }
#tab01 h3.up { height:18px; padding:5px 7px 0 7px; margin:-6px 0 0 0; border:solid #ccc; border-width:1px 1px 0; color:#c00; }
#tab01 div { display:none; position:absolute; left:0; top:32px; z-index:1; width:324px; height:54px; padding:5px; border:solid 1px #ccc; color:#666; }
#tab01 div.up { display:block; }
#tab02 { position:relative; width:200px; margin:50px; border:solid #ccc; border-width:0 1px 1px; }
#tab02 h4 { height:18px; line-height:18px; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; text-align:center; background:#f6f6f6; cursor:pointer; }
#tab02 h4.up { color:#c00; }
#tab02 ol { display:none; height:54px; padding:5px; color:#666; }
#tab02 ol.up { display:block; }
#tab03 { position:relative; width:100px; margin:50px; }
#tab03 h3 { position:relative; z-index:1; height:16px; padding-top:4px; margin-bottom:-1px; border:solid #ccc; border-width:1px 0 1px 1px; text-align:center; font-family:宋体; background:#eee; cursor:pointer; }
#tab03 h3.up { z-index:3; color:#c00; background:#fff; }
#tab03 div.tab { display:none; position:absolute; left:99px; top:0; z-index:2; width:300px; height:200px; padding:5px; border:solid 1px #ccc; color:#666; }
#tab03 div.tab.up { display:block; }
-->
</style>
</head>
<body>
<div id="tab01">
 <h3>首页</h3>
  <div class="jj"><p>嘿嘿，无视div原始class值。</p></div>
 <h3 class="pr">测试</h3>
  <div><p>继续无视h3原始class值。</p></div>
 <h3>无聊</h3>
  <div><p>h3没有值也可以～</p></div>
 <h3 class="box">傻蛋</h3>
  <div><p>div没有值一样可以～</p></div>
</div>
<div id="tab02">
 <h4>首页</h4>
  <ol class="pr"><li>嘿嘿，无视容器原始class值。</li></ol>
 <h4 class="box">测试</h4>
  <ol><li>继续无视h3原始class值。</li></ol>
 <h4>无聊</h4>
  <ol><li>h3没有值也可以～</li></ol>
 <h4 class="bb">傻蛋</h4>
  <ol><li>div没有值一样可以～</li></ol>
</div>
<div id="tab03">
 <h3>首页</h3>
  <div class="tab"><p>嘿嘿，无视h3原始class值。</p></div>
 <h3>测试</h3>
  <div class="tab wushi"><p>继续无视div原始class值。</p></div>
 <h3>无聊</h3>
  <div class="tab"><p>h3没有值也可以～</p></div>
 <h3 class="box">傻蛋</h3>
  <div class="tab tab123"><p>class值相似一样也可以～</p><div><p>指定class后，即时再多一个div也行。</p></div></div>
</div>
<script type="text/javascript">
<!--
function Pid(id,tag){
 if(!tag){
  return document.getElementById(id);
  }
 else{
  return document.getElementById(id).getElementsByTagName(tag);
  }
}

function tab(id,hx,box,iClass,s,pr){
 var hxs=Pid(id,hx);
 var boxs=Pid(id,box);
 if(!iClass){ // 如果不指定class，则：
  boxsClass=boxs; // 直接使用box作为容器
 }
 else{ // 如果指定class，则：
  var boxsClass = [];
  for(i=0;i<boxs.length;i++){
   if(boxs[i].className.match(//btab/b/)){// 判断容器的class匹配
    boxsClass.push(boxs[i]);
   }
  }
 }
 if(!pr){ // 如果不指定预展开容器，则：
  go_to(0); // 默认展开序列
  yy();
 }
 else {
  go_to(pr);
  yy();
 }
 function yy(){
  for(var i=0;i<hxs.length;i++){
   hxs[i].temp=i;
   if(!s){// 如果不指定事件，则：
    s="onmouseover"; // 使用默认事件
    hxs[i][s]=function(){
     go_to(this.temp);
    }
   }
   else{
    hxs[i][s]=function(){
     go_to(this.temp);
    }
   }
  }
 }
 function go_to(pr){
  for(var i=0;i<hxs.length;i++){
   if(!hxs[i].tmpClass){
    hxs[i].tmpClass=hxs[i].className+=" ";
    boxsClass[i].tmpClass=boxsClass[i].className+=" ";
   }
   if(pr==i){
    hxs[i].className+=" up"; // 展开状态：标题
    boxsClass[i].className+=" up"; // 展开状态：容器
   }
   else {
    hxs[i].className=hxs[i].tmpClass;
    boxsClass[i].className=boxsClass[i].tmpClass;
   }
  }
 }
}
tab("tab01","h3","div","","onclick",2); tab("tab02","h4","ol");tab("tab03","h3","div","tab");
//-->
</script>
</body>
</html>

XiongLoveShi
关注
将两个div左右并列显示并实现点击标题切换内容
09-04
将两个div左右并列显示并实现点击标题切换内容的效果，接下来为大家详细介绍下js中时如何实现的，感兴趣的朋友不要错过
动态选项卡菜单切换效果
11-22
在网页设计中，动态选项卡菜单切换效果是一种常见的交互设计元素，它允许用户通过点击不同的选项卡来切换显示不同的内容区域。这种效果不仅提升了用户体验，还能有效地组织和展示大量信息，使得网页界面更加整洁和...
js实现滑动菜单大全(包含Tab滑动，选项卡滑动，横向滑动，竖向滑动)
数元技术博客
05-18 1073
[code="html"] 选项卡 首页 嘿嘿，无视div原始class值。 测试 继续无视h3原始class值。 无聊 h3没有值也可以～ 傻蛋 div没有值一样可以～ 首页 嘿嘿，无视容器原始class值。 测试 继续无视h3原始class值。 无聊 h3没有值也可以～ ...
PHP并列代码,JavaScript_将两个div左右并列显示并实现点击标题切换内容，复制代码 代码如下: <!DOCTYPE - phpStudy...
weixin_28985877的博客
03-21 94
将两个div左右并列显示并实现点击标题切换内容选项卡首页嘿嘿，无视div原始class值。测试继续无视h3原始class值。无聊h3没有值也可以～傻蛋div没有值一样可以～首页嘿嘿，无视容器原始class值。测试继续无视h3原始class值。无聊h3没有值也可以～傻蛋div没有值一样可以～首页嘿嘿，无视h3原始class值。测试继续无视div原始class值。无聊h3没有值也可以～傻蛋class值...
【JavaScript】两个div并排，高度自适应相等
OG
04-02 1287
HTML:&lt;div class="ctn&gt; &lt;div id="left"&gt;11&lt;/div&gt; &lt;div id="right"&gt;测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试         测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试&lt;/div&amp
点击切换
nahedan的博客
01-25 644
点击切换功能 在实际应用中，点击或者移入某一元素上，弹出下拉菜单或者页面，是网页设计的常见操作。 下面我们实现一种点击菜单实现菜单切换，使用js提供三种方式实现该功能。 1.使用html设计基本结构 <body> <h2>多Tab点击切换</h2> <ul id="tab"> <li id="tab1" value="1">10元套餐</li> <li id="tab2" value="2">30元套餐</l
点击动态选项卡图标栏SVG特效
07-24
"点击动态选项卡图标栏SVG特效"就是这样的一个实例，它利用JavaScript、CSS3和SVG（Scalable Vector Graphics）技术，为网页添加了富有吸引力的交互式元素。下面将详细阐述这个特效背后涉及的技术和知识点。 首先，...
jQuery 动态选项卡，jquery Tab Control实例演示
05-12
内容索引:脚本资源,jQuery,Tab,选项卡,jQuery标签　实用于jquery的TabControl类动态创建选项卡【标签】，实例中用TabControl类创建了两人个实用的TAB，并加注了丰富的注释，这里要注意一下，第2个tab测试两个之间的...
react-dyn-tabs：React动态选项卡，多个选项卡，多选项卡
02-22
本项目“react-dyn-tabs”专注于提供一个React组件，实现动态选项卡功能，适用于那些需要根据用户操作或数据变化自动生成和管理选项卡的应用。 首先，让我们深入了解一下“动态选项卡”。在传统的网页设计中，选项...
4种HTML5/CSS3 动态选项卡TAB特效.rar
07-10
在这款"4种HTML5/CSS3动态选项卡TAB特效.rar"压缩包中，你将找到四个不同风格的选项卡（TAB）特效，每个都具有动感十足的动画效果和吸引人的外观。这些特效可以提升用户界面的交互性和用户体验，适用于各种类型的...
2个div并列
03-26
NULL 博文链接：https://baiiiuuu.iteye.com/blog/1130265
js控制div左右切换带左右箭头
11-05
js控制div左右切换带左右箭头
div 左右并排,使用CSS如何让两个div并排显示
weixin_30410473的博客
03-13 3272
用CSS如何让两个DIV盒子并排体现呢？各人知道默认情况下DIV是独占一排的，DIV不设置任何CSS格局，这个DIV盒子都邑独有一行踊跃换行。运用CSS让两个DIV并排闪现，排成一排显示思空见贯方式有两种：1、运用display:inline2、使用float一、应用display:inline实现两个div盒子并排对div设置装备摆设display:inline就可实现div不换行，而是并排显现...
两个div并排显示
zl_action的博客
04-12 1110
一个div一般占据一行空间，所以如果要并排显示可以使用float：left；如果还要居中，使用一个大div包住两个小div，将大div的float:left或者none，自己调试即可。另外注意：大div的长度一定要大于两个小div的长度之和，等于也不行。可能由于边框的存在。长度自己调试即可。...
js实现两个并列的div大小动态改变
lovesman的博客
05-29 981
HTML代码 <div class="modal-body" style="width:100%; overflow: auto;margin: 0;"> <div id="main" class="col-xs-12"> <div id="menu" class="col-xs-6" style="border: 1px solid #ccc; height: 400px; overflow: scroll;">
Js实现两列div高度自适应
weixin_34247155的博客
01-17 56
<!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 h...
左右div内容互换（单击左边div里的一项内容，此内容变没，跑到右边div中）
ly2983068126的博客
10-20 3039
昨天重构页面，发现个小问题，算是电子商务常见的一种效果吧，在网上找了好久没有找到，后来就自己用jQuery写了出来，但是还是有点小问题：单击左边div中的内容，此内容跑到右边div中，但是在单击右边div中的此内容它是回不到左边div的，大家有什么好的建议希望提出来，完善这个效果，我先谢谢大家了！ replaceWith()如果把这个去掉，当点击left中所有元素时，他们会跑到r
上下左右控制div切换选择
if_smile的博客
08-22 983
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script...
让两个Div并排显示的多种方法
热门推荐
liukuan73的专栏
07-13 5万+
http://www.jb51.net/css/140705.html 让两个Div并排显示的方法有很多，使用display的inline属性、通过设置float来让Div并排显示都可以实现，感兴趣的朋友可以参考下本文 让两个Div并排显示  一、使用display的inline属性  复制代码 代码如下: AAAA  BBBB 
winform tabcontrol动态选项卡
最新发布
07-12
### 回答1： 在WinForm中，可以使用TabControl控件实现动态选项卡的效果。动态选项卡是指在运行时根据需求动态地添加或移除选项卡。 要实现这个功能，首先需要在界面上放置一个TabControl控件，然后通过代码来操作选项卡。 动态添加选项卡可以使用TabControl的Tabs属性的Add方法来实现。例如，可以使用以下代码将一个新的选项卡添加到TabControl中： ``` TabPage tabPage = new TabPage("选项卡1"); // 创建一个新的选项卡 tabPage.Name = "tabPage1"; // 设置选项卡的名称 tabControl1.TabPages.Add(tabPage); // 将选项卡添加到TabControl中 ``` 动态移除选项卡可以使用TabControl的Tabs属性的Remove方法来实现。例如，可以使用以下代码将名为"tabPage1"的选项卡从TabControl中移除： ``` TabPage tabPage = tabControl1.TabPages["tabPage1"]; // 获取名为"tabPage1"的选项卡 tabControl1.TabPages.Remove(tabPage); // 从TabControl中移除选项卡 ``` 通过这样的方式，可以动态地根据具体需求添加或移除选项卡。在实际应用中，可以根据用户的操作或其他条件，在适当的时机调用相应的代码来实现动态选项卡的效果。 总结起来，WinForm中的TabControl控件提供了方便的操作方法，可以实现动态选项卡的功能。通过添加和移除选项卡，可以根据实际需求在运行时动态改变选项卡的数量和内容。 ### 回答2： 在WinForm中，TabControl是一个常用的控件，用于创建多个选项卡界面。动态添加和删除选项卡是一种常见的需求，可以通过以下方式实现： 1. 创建TabControl控件： 首先，我们需要在窗体上创建一个TabControl控件，可以通过拖拽的方式添加到窗体上，或者在代码中动态创建。在窗体加载时，我们可以初始化TabControl控件的属性。 ```csharp TabControl tabControl = new TabControl(); tabControl.Dock = DockStyle.Fill; this.Controls.Add(tabControl); ``` 2. 动态添加选项卡： 在需要添加选项卡的事件中，我们可以通过TabControl的TabPages属性动态添加选项卡。每个选项卡可以设置名称和显示的文本信息。例如，以下代码在按钮点击事件中动态添加一个选项卡： ```csharp TabPage tabPage = new TabPage(); tabPage.Name = "tabPage1"; // 设置选项卡名称 tabPage.Text = "选项卡1"; // 设置显示文本 tabControl.TabPages.Add(tabPage); ``` 3. 动态删除选项卡： 如果需要删除选项卡，可以通过TabControl的TabPages属性和Remove方法实现。以下代码在按钮点击事件中删除第一个选项卡： ```csharp if (tabControl.TabPages.Count > 0) { tabControl.TabPages.Remove(tabControl.TabPages[0]); } ``` 通过以上步骤，我们可以实现TabControl动态添加和删除选项卡的功能。当需要添加或删除选项卡时，我们可以在代码中根据实际需求灵活调用相应的方法。 ### 回答3： Winform中的TabControl是一种常用的控件，用于创建选项卡式的界面。如果要实现动态选项卡，即在程序运行过程中动态地添加、删除、修改选项卡，可以采取以下步骤： 1. 创建一个TabControl控件：在窗体上拖拽TabControl控件，或者在代码中创建TabControl对象。 2. 设置选项卡属性：可以设置选项卡的显示样式、大小、位置等。也可以设置选项卡的文本、图标等，以便用户识别和操作。 3. 添加选项卡页：可以通过以下代码向TabControl中添加选项卡页： TabPage tabPage = new TabPage("选项卡页标题"); tabControl1.TabPages.Add(tabPage); 4. 删除选项卡页：可以通过以下代码删除指定的选项卡页： tabControl1.TabPages.Remove(tabPage); 5. 修改选项卡页：可以通过以下代码修改选项卡页的文本、图标等属性： tabPage.Text = "新的选项卡页标题"; tabPage.ImageIndex = 1; 6. 响应选项卡切换事件：可以为TabControl的SelectedIndexChanged事件添加处理函数，实现在选项卡页切换时执行相应的逻辑操作。 tabControl1.SelectedIndexChanged += TabControl1_SelectedIndexChanged; private void TabControl1_SelectedIndexChanged(object sender, EventArgs e) { // 在选项卡切换时执行的逻辑操作 } 通过上述步骤，可以实现Winform中TabControl的动态选项卡功能。可以根据实际需求，动态添加、删除和修改选项卡页，同时根据选项卡的切换事件来执行相应的逻辑操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值