-
2021-06-09 15:35:56
*{ padding:0;margin: 0;}
.example{ width: 500px;height: 400px; margin: 50px auto 0 auto; }
#mytab{ width: 100px; float: left; border-left: 1px solid lightgray; border-bottom:1px solid lightgray;}
#mytab li{ list-style-type: none; border-top: 1px solid lightgray; border-right:1px solid lightgray;height: 30px;line-height: 30px;text-align: center;}
#mytab li.active{ border-right:1px solid #ffffff;}
#mytabContent{float: left;}
#mytabContent div{ display: none;}
#mytabContent div.active{display: block;}
#mytabContent div p{padding: 10px;}
This is First
This is Second
This is Third
This is Fourth
$(function(){
$("#mytab").find("li").click(function(){
$(this)
.siblings("li")
.removeClass("active")
.end()
.addClass("active");
var index= $("#mytab").find("li").index($(this));
if(index>=0){
var targetContent=$("#mytabContent").find("div").eq(index);
targetContent
.siblings("div")
.removeClass("active")
.end()
.addClass("active");
}else
{
alert("nima");
}
});
});
Jquery 简单的Tab选项卡特效
ab">
最新 热门< ...js 实现tab选项卡
最近一直在研究js 如果不及时复习的话前边学到的东西很快就会忘掉,所以把前段时间的一个简单的tab选项卡的思路写出来也算复习了一下吧, 第一步:先把布局写出来:
< ...jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
js基础练习一之tab选项卡
最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡--
随机推荐
CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
Long-Short Memory Network(LSTM长短期记忆网络)
自剪枝神经网络 Simple RNN从理论上来看,具有全局记忆能力,因为T时刻,递归隐层一定记录着时序为1的状态 但由于Gradient Vanish问题,T时刻向前反向传播的Gradient在T-1 ...
linux ssh scp 命令
ssh jackielee@192.168.1.103 scp jackielee@192.168.1.103:/home/jackielee/develop/helloworld helloworl ...
查看Oracle最耗时的SQL
有很多种方法可以用来找出哪些SQL语句需要优化,但是很久以来,最简单的方法都是分析保存在V$SQL视图中的缓存的SQL信息.通过V$SQL视图,可以确定具有高消耗时间.CUP和IO读取的SQL语句. ...
Qt 学习之路:视图选择 (QItemSelectionModel)
选择是视图中常用的一个操作.在列表.树或者表格中,通过鼠标点击可以选中某一项,被选中项会变成高亮或者反色.在 Qt 中,选择也是使用了一种模型.在 model/view 架构中,这种选择模型提供了一种 ...
Terracotta收购Ehcache (转)
随着Terracotta对Ehcache的收购成行,业界两大知名的开源Java缓存产品走到了一起.以提供JVM级“POJO集群”而闻名于世的Terracotta可以将运行在单个JVM上的多线程应用移植 ...
ES 入门之一 安装ElasticSearcha
安装ElasticSearcha 学习ES也有快一个月了,但是学习的时候一直没有总结.以前没有总结是因为感觉不会的很多,现在对ES有一点了解了.索性就从头从安装到使用ES做一个详细的总结,也分享给其他 ...
CSS布局(圣杯、双飞翼、flex)
圣杯布局(float + 负margin + padding + position)
ORACLE设置用户密码不过期
1.查看用户的 profile 是哪个,一般是 default SELECT USERNAME, PROFILE FROM dba_users; 2.查看指定概要文件(这里是1中对应的profile) ...
.NET CORE控制器里的方法取传参的坑
把以前的ASP.NET MVC的项目改成用.NET CORE来写,写好了部署上去了,结果问题一大堆,今天慢慢检查了一下,发现一个大坑: 写控制器里的方法接收参数数都是直接写在控制器的方法参数里的,如: ...
更多相关内容 -
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2020-10-23 15:18:16主要介绍了jQuery实现的Tab滑动选项卡及图片切换效果小结,实例总结了几种常见的tab切换效果,包括鼠标点击切换、滑过切换、定时自动切换等,非常具有实用价值,需要的朋友可以参考下 -
一个漂亮Tab切换选项卡,原生态调用,不用jquery文件,简捷实用, 包含小图!
2020-05-29 16:45:12一个漂亮Tab切换选项卡,调用方便,主要是自己修改来用也方便,js代码六行,小图片也都在里面,一个页面支持多个tab。 -
使用js实现tab选项卡滑动切换效果
2021-06-10 15:51:24选项卡效果还包括延迟切换和自动切换效果。今天,让我们学习选项卡滑动效果。html代码使用两个div来包含标题和内容,因此标题数和内容数必须相同。 详细的html代码和CSS代码如下所示:html代码:友情链接底部导航...首先,让我们看看选项卡效果是什么样的。以经常能遇到的QQ新闻为例,它具有以下效果:
当鼠标滑过相关标题时,对应于该标题的内容将会出现。这是选项卡的滑动切换效果。选项卡效果还包括延迟切换和自动切换效果。今天,让我们学习选项卡滑动效果。
html代码使用两个div来包含标题和内容,因此标题数和内容数必须相同。 详细的html代码和CSS代码如下所示:
html代码:
css代码就不贴了,有兴趣的朋友直接用DevTool工具查看;
拖动转换实际效果,简而言之,就是说当鼠标滑过的那时候,显示信息题目下的內容。必须将当前的标题样式设置为选定状态,在同一时间将该标题下的內容设置为显示,即设置样式display:block,而其他标题下的内容设置为隐藏,即设置样式display:none。详细的javascript代码如下所示:
$(document).ready(function() {
jQuery.jqtab = function(tabtit,tab_conbox,shijian) {
$(tab_conbox).find("li").hide();
$(tabtit).find("li:first").addClass("thistab").show();
$(tab_conbox).find("li:first").show();
$(tabtit).find("li").bind(shijian,function(){
$(this).addClass("thistab").siblings("li").removeClass("thistab");
var activeindex = $(tabtit).find("li").index(this);
$(tab_conbox).children().eq(activeindex).show().siblings().hide();
return false;
});
};
/*调用方法如下:*/
$.jqtab("#tabs","#tab_conbox","click");
$.jqtab("#tabs2","#tab_conbox2","mouseenter");
});
注:Mouseover:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
Mouseenter:只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
这里使用的是Mouseenter,mouseenter子元素不会反复触发事件,否则在IE中经常有闪烁情况发生。
在浏览器中的效果如下所示:
当鼠标过相关标题的时候,标题中对应的内容则会显示出来(没错就是网站底部的tab切换)。
今天,我和大家分享了Tab的滑动切换效果,希望给大家一个热身,掌握Tab的原理。其实滑动切换、延时切换和自动切换三种效果相对容易实现。要是发觉有的地方填错了或是写的不太好,可以给我留言,欢迎大伙儿指点迷津!我们一起来加油!感谢阅读。
-
移动端选项卡切换展示echarts数据图表代码
2020-06-09 22:49:59移动端选项卡切换展示echarts数据图表代码,包括有扇形图、柱形图、折线图3种图表统计展示。 -
js原生和jquery 选项卡tab切换
2018-09-07 11:21:23选项卡切换,包括js原生的和 jquery两种方式的 tab选项卡切换 -
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2020-11-22 15:12:35这里实现一个特效将网页中的选项卡滑动门都集中到一个网页中来,有些同志曾经为同一个页面布置两个滑动门而烦恼,参考一下本例子,相信你会找到答案,而且有各种排列方式的选项卡,总有一款会满足你。 运行效果截图... -
bootstrap响应式折角tab选项卡标签切换代码
2018-06-21 12:51:10响应式折角tab选项卡,基于bootstrap制作的标签切换特效,包含鼠标悬停特效和点击切换动画特效。 -
ionic 选项卡栏操作
2021-01-06 02:56:58ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的...包含一个选项卡内容。该内容仅存在于被选中的给定 -
JavaScript插件Tab选项卡效果
2020-11-27 00:20:521、支持不同鼠标事件触发选项卡切换效果; 2、支持不同切换效果的配置,例如淡入淡出/直接切换; 3、支持默认展示第几个选项卡的配置; 4、支持选项卡的自动切换效果。 例子很简单,需要用到的知识包括: 1、... -
jQuery 选项卡插件(含四种激活方式)
2021-05-16 17:00:53内容索引:脚本资源,jQuery,Tab,选项卡,jQuery插件 jQuery 选项卡插件,含四种激活方式,一般都包括在内了,像鼠标移上切换、点击切换,Ajax方式切换等,核心 组件是jQuery家庭的新成员,有兴趣查看示例程序。 -
仿微信主界面选项卡切换
2018-08-01 17:03:17大多数主流程序的主界面样式 多个选项切换不同的页面,包括首页 我的 学习 等等随时随地更换页面方便开发 -
快速选项卡切换器「Fast Tab Switcher」-crx插件
2021-03-21 08:46:26快速选项卡切换器允许您只使用键盘快速切换到Chrome窗口中的其他打开的选项卡,包括通过部分名称或URL匹配过滤选项卡。此外,最近访问过的选项卡将位于列表的顶部,使您可以轻松地在两个选项卡之间弹跳。 ---- 显示... -
bootstrap选项卡使用方法解析
2020-08-31 16:58:01主要为大家详细介绍了bootstrap选项卡使用方法,包括选项卡组件和底部可以切换的选项卡面板使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
wpfchrometabs-mvvm:基于WPF chrome选项卡的选项卡控件,已修改为与MVVM模式一起使用
2021-05-26 16:43:15支持将选项卡拖动到新窗口,然后将其重新吸附到选项卡中。 支持固定选项卡。 可绑定属性以锁定选项卡 可绑定属性以显示/隐藏“添加选项卡”按钮 所选标签笔刷的可绑定属性 拖动最后剩余的选项卡时,可绑定属性改... -
dojo学习第一天 Tab选项卡 实现
2020-12-01 01:20:30它包含大约40个用户界面控件、1个图形框架、cometd支持、1个打包系统,还有其他的一些东西。 从dojo官方网站 上下载最新版1.6,解压下来,它有三个文件夹分别是: 1. dojo: 是Dojo基础,你要做的其它事情都是在它... -
jQuery二级多级选项卡tab特效
2020-06-09 23:47:34一款扁平风格jQuery响应速度很快的二级选项卡多级选项卡,顾名思义,就是选项卡中包含了下级选项卡,支持多种样式,当然这样你去调试了。 -
jQuery动态选项卡,包括Tabs中iframe的使用等实例.rar
2019-07-09 22:04:41jQuery动态选项卡,包括Tabs中iframe的使用等实例。 适用于jquery的TabControl类动态创建选项卡【标签】,实例中用TabControl类创建了两人个实用的TAB,并加注了丰富的注释,这里要注意一下,第2个tab测试两个之间的... -
js选项卡切换
2012-07-25 14:46:19JS实现标签切换效果,网站中常用到的选项卡切换效果,可以拿过来直接使用,已测试多种浏览器兼容,包括极品的ie6浏览器 -
前端实用功能:选项卡切换
2018-07-18 15:39:08这个功能主要还是由display:block 与 display:none之间通过点击选项卡切换完成的 html代码 <div> <ul id="hear"><!--选项卡列表,如果是底部选项卡,将hear ...这个功能主要还是由display:block 与 display:none之间通过点击选项卡切换完成的
html代码
<div>
<ul id="hear"><!--选项卡列表,如果是底部选项卡,将hear fixed到底部,侧边栏重新设置css-->
<li class="action" style="color: #FF4200;border-bottom: 1px solid #FF4200;"><!--带action的会默认选中--> 第一页选项 </li> <li> 第二页选项 </li> <li> 第三页选项 </li>
</ul>
<ul id="content"> <!--选项卡内容列表--> <li class="action" id="content1"><!--带action的会默认显示--> 第一页内容 </li> <li id="content2"> 第二页内容 </li> <li id="content3"> 第三页内容 </li>
</ul>
</div>
这是包含选项卡所有内容的整体的div,选项卡的标题写在第一个ul(#hear)中,每个选项卡的内容写在第二个ul(#content)中,不一定必须是ul,总体格式是这样就可以,选项卡的标题数目与选项卡的内容数目应对应相等,可以凭自己需要一起添加删减。
CSS代码
* { margin: 0px; padding: 0px; } ul { list-style: none; } #hear{ height: 50px; width: 400px; text-align: center; line-height: 50px; } #hear li { /*第几个选项卡的样式,有几个选项卡就有几个*/ width: 33.33%; float: left; } #content{ margin-top: 30px; } #content li { /*让所有内容页隐藏*/ display: none; width: 400px; border: 5px solid red; height: 200px; } #content .action { /*让选中的内容页显示*/ display: block; }
根据自己的需求设计合适的css样式,需要注意的一点是,需要显示的内容添加一个组名.action,让其display:block;其他的内容区全部隐藏。与需要显示内容的content对应的选项卡标题也要设置一个action组,上面的HTML代码中已经给出了第一个选项卡与第一个内容的action组,并且给选项卡名称所在的li添加了不同的样式
那么这就是我的选项卡的样式
JS代码
$("#hear li").click(function() { /*----------------选项卡的点击事件,移动端用tap-----------------*/ $(this).css({/*选中选项卡的样式*/ color: "#ff4200", borderBottom: "1px solid #ff4200" }).siblings().css({/*未选中选项卡的样式*/ color: "#000000", borderBottom: "none" }); }); $("#hear li").click(function() { /*----------------选项卡的点击事件,移动端用tap-----------------*/ $(this).addClass("action").siblings().removeClass("action");/*选中的li添加action类,其他的移除*/ var index = $(this).index();/*定义索引数值*/ $("#content li").eq(index).css("display", "block").siblings().css("display", "none");/*相对应的第几个内容区显示,其他的隐藏*/ });
js代码是使用jQuery写的,可以直接在上方的代码中修改想要的点击切换样式
下面的方法是点击时给点击的选项卡和相对应的选项卡内容添加action类,其他的兄弟元素移除action类,这样就做到了切换效果
-
前端js——tab选项卡切换模板、例子(点击标签显示对应内容)
2019-03-23 12:52:42效果 1.页面布局 ...1)设置一个整个的div包含所有的标签和所有内容 2)标签 <ul> <li style="background: blanchedalmond;">快餐</li> <li style="background: burlywood;...效果
1.页面布局
分别设置五个标签,给五个标签写序号,移到标签上获取标签序号显示对应的div
1)设置一个整个的div包含所有的标签和所有内容
2)标签<ul> <li style="background: blanchedalmond;">快餐</li> <li style="background: burlywood;">面食</li> <li style="background: cyan;">甜点</li> </ul>
3)内容
<div class="main" style="background: blanchedalmond;"></div> <div class="main" style="background: burlywood;"></div> <div class="main" style="background: cyan;"></div>
2.页面样式
1)设置整个tab的大小边框
#tab{ width: 400px; height: 300px; border: blue 1px solid; margin: 30px auto; }
2)标签浮动\清除标签原点
#tab ul li{ float: left; width: 133px; height: 30px; list-style: none; text-align: center; line-height: 30px; }
3)设置内容部分,加绝对定位避免出现三个内容框,设置内容部分隐藏
.main{ width: 390px; height: 250px; margin-left: 5px; margin-top: 40px; display: none; position: absolute; }
3.给标签加移入事件,实现tab切换
1)获取id进行 定义
2)利用循环给li分别加序号for(var i=0;i<list.length;i++){ list[i].xuhao=i; }
3)鼠标移入事件:获取li的序号,显示对应序号的div
list[i].onmouseover=function(){ var c=this.xuhao; cn[c].style.display="block" }
4)保证tab可以循环使用,每执行一次都先让其他都隐藏在显示对应的
for(var i=0;i<3;i++){ cn[i].style.display="none"; }
4.源码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } #tab{ width: 400px; height: 300px; border: blue 1px solid; margin: 30px auto; } /*标签浮动\清除原点*/ #tab ul li{ float: left; width: 133px; height: 30px; list-style: none; text-align: center; line-height: 30px; } /*设置内容部分,加绝对定位避免出现三个内容框*/ .main{ width: 390px; height: 250px; margin-left: 5px; margin-top: 40px; display: none; position: absolute; } </style> </head> <body> <div id="tab"> <!--标签--> <ul> <li style="background: blanchedalmond;">快餐</li> <li style="background: burlywood;">面食</li> <li style="background: cyan;">甜点</li> </ul> <!--内容--> <div class="main" style="background: blanchedalmond;display: block;"></div> <div class="main" style="background: burlywood;"></div> <div class="main" style="background: cyan;"></div> </div> <script> var tab=document.getElementById("tab"); var list=tab.getElementsByTagName("li"); var cn=tab.getElementsByClassName("main"); // 加序号 for(var i=0;i<list.length;i++){ list[i].xuhao=i; // 鼠标移入事件 list[i].onmouseover=function(){ // 获得当前移入的li序号 var c=this.xuhao; for(var i=0;i<3;i++){ cn[i].style.display="none"; } // 对应序号的内容显示 cn[c].style.display="block" } } </script> </body> </html>
-
Bootstrap选项卡与Masonry插件的完美结合
2021-01-19 15:10:18Bootstrap的选项卡组件包括两个关键点:选项卡导航元素和一些内容面板。在页面加载时,第一个面板应用了 .active 类。使这个面板默认是可见的。这个类是通过使用JavaScript来切换面板的可见性,通过选项卡导航触发的... -
layui tab 选项卡切换 内容无变化
2021-04-07 14:48:16问题描述: 使用layui tab 点击切换tab 但是内容无变化 切换前: 切换后: ...查看代码 tab 的div 是否将layui-tab-content 包含 ...我的不含,所以切换不了 修改 为 可以正常切换 ... -
【APICloud】选项卡切换万用js函数
2018-06-20 17:17:10之前自己做项目的时候遇到过这个问题,现在想起来就传上来了^-^ 因为项目需求,标签的个数和具体的选项个数都是后台可改变的,所以需要用万用的函数解决标签切换的问题,得益于apicloud的出色设计,最后抠出来了这... -
学习使用Bootstrap选项卡功能
2021-08-02 16:35:54学习使用Bootstrap选项卡功能前言基本用法胶囊式选项卡JS触发事件订阅JS源码 ...2、可以切换的选项卡面板组件,在 Bootstrap 中通常 tab-pane 来表示 在Bootstrap框架中选项卡nav-tabs已带有样式,而对于面板内容 -
sublime-goto-open-file:Sublime Text 2 的插件,可打开用于在选项卡之间切换的快速面板
2021-07-12 07:17:35GotoOpenFile 会弹出一个快速面板,其中仅包含当前打开的选项卡。 对于活动组中的选项卡,默认键绑定是 ctrl-shift-o(或 cmd-shift-o)。 对于整个窗口中的选项卡,默认键绑定是 alt-shift-o。 默认情况下,... -
Java中的高级组件面板——JTabbedPane(选项卡面板)
2021-02-28 17:20:55在Java的GUI设计中,若是要想实如今一个窗体中多个界面而且能在这些界面内能够随意切换,那选项卡面板绝对是最佳的选择,下面将具体介绍JTabbedPane的使用方法java使用方法介绍1. 首先,须要导入JTabbedPane类,即在... -
CSS+JS实现的圆角边框TAB选项卡滑动门代码
2020-06-06 00:11:03本实例包含两款CSS圆角代码,可鼠标点击,也可鼠标移动上去显示效果 -
ASP.NET网页Tab选项卡控件源码及示例
2021-03-16 04:07:35内容索引:.NET源码,控件组件,选项卡,控件 一个用C#编写的用于网页的TAB选项卡控件源代码,并附有一个使用示例,包括在静态环境下的一个HTML示例,TAB选项卡如图示,效果很不错,部分功能使用了JQUERY配合,这使得...