精华内容
下载资源
问答
  • html选项卡
    千次阅读
    2020-07-28 14:45:39
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    				list-style-type: none;
    			}
    			.title{
    				display: flex;
    			}
    			.container{
    				width: 500px;
    				border: 1px solid red;
    				margin: 100px auto;
    			}
    			.title{
    				display: flex;
    			}
    			.title li{
    				flex: 1;
    				padding: 10px 0;
    				text-align: center;
    			}
    			.title li.active{
    				background-color: #0000FF;
    				color: #FFFFFF;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<ul class="title">
    				<li class="active">火车票</li>
    				<li>汽车票</li>
    				<li>飞机瓢</li>
    			</ul>
    			<ul class="content" style="padding: 10px;">
    				<li>火车票111111111111111</li>
    				<li style="display: none;">汽车票11111111111111111</li>
    				<li style="display: none;">飞机瓢111111111111111</li>
    			</ul>
    		</div>
    		<script>
    			let title = document.getElementsByClassName('title')[0]
    			let content = document.getElementsByClassName('content')[0]
    			let titlelist = title.children
    			let contentlist = content.children
    			for(let i = 0; i < titlelist.length; i++){
    				let item = titlelist[i];
    				item.onclick = () => {
    					let active = title.getElementsByClassName('active')[0]
    					active.classList.remove('active')
    					item.classList.add("active")
    					
    					
    					for(let j = 0; j < titlelist.length; j++){
    					contentlist[j].style.display = "none"
    					}
    					contentlist[i].style.display = "block"
    				}
    			}
    		</script>
    	</body>
    </html>
    
    
    更多相关内容
  • html选项卡

    2017-12-06 15:49:12
    很简单的html选项卡,适合刚开始学习html的同学,非常实用。
  • html 选项卡

    2013-05-28 13:05:49
    有图有真相,如果你也正需要,那么请支持我一下,下载!谢谢
  • HTML调用JS实现多项滑动门选项卡特效 国开电大Dreamweaver网页设计形考任务八答案, 更新版国家开放大学/电大专科《Dreamweaver网页设计》形考任务八。
  • HTML5 CSS3实现Tabs选项卡特效是一款各个选项卡之间切换时使用了下划线跟随动画,整体效果非常不错。
  • HTML选项卡制作

    千次阅读 2021-04-11 20:00:55
    当点击标着不同选项的按钮时,会出现相应选项的内容,这是我们要实现的选项卡功能。 方法1:HTML+CSS+JS实现 首先,如图1.1在页面放上几个按钮,并且加上对应想要展示的div(例子中为4个选项)。 图1.1 设置按钮 ...

    当点击标着不同选项的按钮时,会出现相应选项的内容,这是我们要实现的选项卡功能。

    方法1:HTML+CSS+JS实现

    首先,如图1.1在页面放上几个按钮,并且加上对应想要展示的div(例子中为4个选项)。
    在这里插入图片描述图1.1 设置按钮

    依次给4个div背景选为不同颜色,并且设置一下样式,能看到图1.2所示结果。在这里插入图片描述

    图1.2 按钮样式

    用js实现的思路很简单:比如可以先让其他div隐藏,点击第n个按钮的时候再让第n个div出现,且让该按钮样式变成已选中的样子,并默认第一个按钮先按下显示第一个div ,具体步骤如下所示。

    1.先让所有div都隐藏,给第一个div单独设置display : block(见图1.3&1.4)。在这里插入图片描述

    图1.3 在css中设置div都隐藏
    在这里插入图片描述
    图1.4 使第一个div显现

    2.给第一个按钮设置class=“checked”,代表已选中(图1.5&1.6)。
    在这里插入图片描述
    图1.5 让第一个按钮显示已选中
    在这里插入图片描述
    图1.6 设置已选中的样式

    通过图1.7可以看到选中按钮和其他按钮的区别。
    在这里插入图片描述
    图1.7 区别展示图

    3.接下来开始写javascript,获取需要用到的元素(图1.8)。
    在这里插入图片描述
    图1.8 js中获取元素

    然后添加一个for循环(如图1.9,图带有代码注解),效果就可以实现了!
    在这里插入图片描述
    图1.9 for循环

    效果就可以实现了!

    方法2:HTML+CSS实现

    纯css实现选项卡功能的方法也不止一种,这里用radio(单选按钮)来实现(图2.1)。
    在这里插入图片描述
    图2.1 css——radio程序

    与上一个方法中元素类似,并且也让div先隐藏。

    (注:由于radio样式基本不能改,所以可以用

    可以看到,radio自带checked属性。css中可以这样写(图2.2):
    在这里插入图片描述
    图2.2 check属性程序编写

    它的意思是:当id为"r1"的radio被选中(:checked)时,让同级下第1个div显示出来(display: block;)。照着这个模板写4个,让每个radio控制相应的div显示(图2.3)。
    在这里插入图片描述
    图2.3 4个check属性程序编写

    除此之外,用这种方法也可以设置被选中label的“已选中”样式,最后将radio、label选中样式程序合并一下(图2.4)。
    在这里插入图片描述
    图2.4 程序图

    这样就实现了单纯依靠css制作HTML选项卡!

    选项卡可以拓展应用在很多地方,比如简易的轮播图和导航栏。这样的效果还可以通过其他方法实现,比如用H5新特性实现tab选项卡切换等等。
    感谢阅读!
    在这里插入图片描述

    展开全文
  • tab.rar,tab.html
  • 选项卡demo.html

    2020-06-09 13:56:20
    打开就能使用的选项卡,点击切换内容,开始有一个默认的class,后面点击切换的时候class名也跟着切换,可以实现点击导航改变颜色的效果。通用,易改。
  • html网页版的选项卡控件tab.zip
  • html选项卡源码

    2016-04-05 12:03:53
    完美简单的选项卡源码
  • 好看的选项卡样式

    2016-08-06 17:14:53
    非常好看的选项卡样式,我今天刚封装的!
  • html5响应式布局设计web带图标的选项卡切换效果代码 html5响应式布局设计web带图标的选项卡切换效果代码 html5响应式布局设计web带图标的选项卡切换效果代码
  • html中制作选项卡(tabs)

    千次阅读 2021-06-10 16:12:09
    快速建立一个html选项卡(tabs)在网页中常常会看到这样的标签页,其实实现的方法也不难,接下来就介绍如何快速的建立一个html标签卡 这是我做好的demo预览效果 使用的软件以及技术:sublime text 3编辑器...

    快速建立一个html选项卡(tabs)

    在网页中常常会看到这样的标签页,其实实现的方法也不难,接下来就介绍如何快速的建立一个html标签卡

    00af97f4d406b723f7d1ad4d8564ddbf.png

    这是我做好的demo预览效果

    1bf877adc142e2fa35b4bc820600320d.png

    使用的软件以及技术:

    sublime text 3编辑器

    html+css

    jQuery

    1.建立一个html,并写好基本的结构

    如果你使用的是sublime text 3并安装emmet插件,就可以快速创建了:div>(ul>li{Section $}*4)+div*4,然后敲击tab键。

    2fc84ebad2c2de1db3895e9055b54024.png

    给整体的div添加class为label,给第一个li添加class为showed,给第一个小div添加class为showed,并完善div里的文字内容

    Section 1

    Section 2

    Section 3

    Section 4

    This is the first section

    This is the second section

    This is the third section

    This is the fourth section

    2.编写css样式

    设定label的大小为宽400,高500,位置和文字都居中。

    设定ul的大小为宽400,高50,

    设定li的大小为宽100,高50,无头部样式,向左浮动,默认的背景色为灰色,文字为白色上下居中。

    设定下面的内容宽400,高50,绝对定位(让四个div重叠),文字为白色,背景为灰黑色,默认隐藏。

    li标签中的showed类就是现在要展示的标签,突出展示,颜色为灰黑色,顶部有橘色的边框,文字调整高度居中,设置阴影突出立体感。

    div标签中的showed类就是对应展现的内容了,display改为block显示,并设置阴影突出立体感。

    代码如下:

    *{

    margin: 0px;

    padding: 0px;

    }

    .label{

    width: 400px;

    height: 500px;

    margin: 120px auto;

    text-align: center;

    }

    .label>ul{

    width: 400px;

    height: 50px;

    }

    .label>ul>li{

    list-style: none;

    float: left;

    width: 100px;

    height: 50px;

    background-color: gray;

    line-height: 50px;

    color: white;

    }

    .label>div{

    width: 400px;

    height: 500px;

    position: absolute;

    color: white;

    line-height: 70px;

    background-color: #222222;

    display: none;

    }

    .label li.showed{

    background-color: #222222;

    border-top: 5px solid orange;

    line-height: 40px;

    box-shadow: 5px 5px 20px #333333;

    }

    .label div.showed{

    display: block;

    box-shadow: 5px 5px 20px #333333;

    }

    3.编写js

    首先引入jqurey

    当鼠标悬停在li标签上时,如果不是showed类的话(不是当前展现的内容),执行以下步骤

    将带有showed类的标签去掉showed类

    将当前的li添加上showed类

    将当前对象li标签在父标签中的位置index()对应的内容div也添上showed类

    4.完成

    这样简单的几个步骤就完成动态的选项卡切换效果,演示在文章的开头,完整的demo文件在百度网盘中。

    标签卡Demo.html演示文件:百度网盘 https://pan.baidu.com/s/1bpVwQuV

    展开全文
  • HTML侧边栏Tab选项卡

    千次阅读 2021-06-09 01:00:19
    HTML代码选项卡1选项卡2选项卡3选项卡4选项卡5我是Tab选项卡1的内容使用简单,引入css和Jq代码即可我是Tab选项卡2的内容我是Tab选项卡3的内容我是Tab选项卡4的内容我是Tab选项卡5的内容CSS代码#TabMain{width:800px;...

    HTML CSS Jq实现的简单侧边栏选项卡,实现非常简单,你也可以轻松的在现有的基础上扩充。先看下效果图,再献上代码。

    77bc6c29d097e36a548fba396f9f4e3b.png

    HTML代码

    选项卡1 选项卡2 选项卡3 选项卡4 选项卡5

    我是Tab选项卡1的内容

    使用简单,引入css和Jq代码即可

    我是Tab选项卡2的内容

    我是Tab选项卡3的内容

    我是Tab选项卡4的内容

    我是Tab选项卡5的内容

    CSS代码#TabMain {

    width: 800px;

    height: 500px;

    margin: 0 auto;

    margin-top: 100px;

    }

    .tabItemContainer {

    width: 100px;

    height: 500px;

    float: left;

    }

    .tabBodyContainer {

    width: 677px;

    height: 500px;

    float: left;

    background-color: #fff;

    border: 1px solid #ccc;

    -webkit-border-radius: 0 5px 5px 0;

    -moz-border-radius: 0 5px 5px 0;

    border-radius: 0 5px 5px 0;

    margin-left: 1px;

    }

    .tabItemContainer>li {

    list-style: none;

    text-align: center;

    }

    .tabItemContainer>li>a {

    float: left;

    width: 100%;

    padding: 30px 0 30px 0;

    font: 16px "微软雅黑", Arial, Helvetica, sans-serif;

    color: #808080;

    cursor: pointer;

    text-decoration: none;

    border:1px solid transparent;

    }

    .tabItemCurrent {

    background-color: #fff;

    border: 1px solid #ccc !important;

    border-right: 1px solid #fff !important;

    position: relative;

    -webkit-border-radius: 5px 0 0 5px;

    -moz-border-radius: 5px 0 0 5px;

    border-radius: 5px 0 0 5px;

    }

    .tabItemContainer>li>a:hover {

    color: #333;

    }

    .tabBodyItem {

    position: absolute;

    width: 677px;

    height: 500px;

    display: none;

    }

    .tabBodyItem>p {

    font: 13px "微软雅黑", Arial, Helvetica, sans-serif;

    text-align: center;

    margin-top: 30px;

    }

    .tabBodyItem>p>a {

    text-decoration: none;

    color: #0F3;

    }

    .tabBodyCurrent{

    display:block;

    }

    Jq代码var SidebarTabHandler={

    Init:function(){

    $(".tabItemContainer>li").click(function(){

    $(".tabItemContainer>li>a").removeClass("tabItemCurrent");

    $(".tabBodyItem").removeClass("tabBodyCurrent");

    $(this).find("a").addClass("tabItemCurrent");

    $($(".tabBodyItem")[$(this).index()]).addClass("tabBodyCurrent");

    });

    }

    }

    展开全文
  • 超好用简单的选项卡JS插件新手可用,简单方便,代码易懂,只需更换样式名后,可以一个页面多次调用
  • HTML+CSS实现的选项卡

    2018-06-16 10:41:55
    最简单的选项卡实现,适合一些入门的同学学习观摩。 最简单的选项卡实现,适合一些入门的同学学习观摩。
  • 形考任务八 HTML 调用js实现多项滑动门选项卡特效。
  • HTML5圆角TAB选项卡,网页TAB标签,代码十分简洁,纯CSS3实现的圆角,点击TAB后内容才切换,非滑动门操作方式。特别是用CSS3实现的圆角和弧形,是亮点,不使用任何图片实现的圆滑网页选项卡效果,同时也是学习HTML5...
  • 纯CSS实现选项卡效果

    2018-09-04 17:19:15
    通过HTML + CSS 实现web前端选项卡效果,写这个的初衷就在于那个亘古不变的道理,能用CSS解决的就不用js
  • Html简单实现垂直选项卡移动显示内容
  • 如何使用HTML制作tab选项卡

    千次阅读 2021-09-16 09:28:51
    2.我们新建一个html文档,在新建一个css样式文件,将它们放入同一文件夹下。用link标签将css外部样式文件引入HTML文档 3.之后我们给它一个div,设置类名为“bk”,再给5个li标签,给第一个li标签设置一个类 ...
  • 代码简介:HTML5 Tab选项卡动画切换特效是一款基于HTML5 CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs。
  • Tab选项卡.html

    2019-10-25 20:06:09
    Tab选项卡
  • 主要介绍了js实现简洁的滑动门菜单(选项卡)效果代码,涉及javascript鼠标事件操作页面元素样式切换的实现技巧,简单实用,需要的朋友可以参考下
  • 原标题:Tab选项卡切换完整思路及实现,值得珍藏这篇文章是从微信上转载过来的,原文作者是“Java实例解析”,文章内容很棒,只是这个作者可能是一时看不到效果,所以没更新几篇就放弃了,让人惋惜。今天要推荐给...
  • 选项卡.html

    2019-10-25 20:04:42
    选项卡选择
  • 04选项卡轮播图第二遍.html
  • 这是一款效果非常炫酷的HTML5 SVG和jQuery垂直选项卡布局特效。该选项卡布局将tabs垂直排列在左侧,每个Tab都使用SVG来制作图标,当用户切换Tab时,旧的选项卡往上移动,新的选项卡从上面往下移动,效果非常酷。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 196,956
精华内容 78,782
关键字:

html选项卡

友情链接: sort.rar