记录一个简洁的html tab 标签

最新推荐文章于 2024-09-26 14:24:29 发布
最新推荐文章于 2024-09-26 14:24:29 发布
阅读量375 收藏
点赞数
文章标签： python xhtml
原文链接：https://my.oschina.net/u/931071/blog/284791
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<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">  

 

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(http://www.jb51.net/upload/small/20079299441652.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(http://www.jb51.net/upload/small/200792994426548.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>



 

<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>

</body>


转载于:https://my.oschina.net/u/931071/blog/284791

weixin_34355881
关注
HTML实现Tab选项卡（自动+手动）
03-06
tab选项卡是常见的网页效果，也叫滑动门特效，本资源实现自动调转和手动（click onmouseover）切换
tab标签无刷新导航菜单
06-10
"tab标签无刷新导航菜单"就是一个旨在提供流畅、快速切换的页面元素，让用户在不同内容之间切换时无需等待页面整体刷新，从而提高网页浏览效率。这个技术尤其适用于那些包含多个步骤或模块的页面，比如注册、设置、...
学习笔记(01):《从零起步，系统掌握Python网络爬虫》-HTTP协议介绍（1）
pynyousa的博客
10-19 236
本课是一门面向企业实际需求，专为零基础想入门并进阶中级python爬虫工程准备。 课程从最基本的网络抓包开始讲起，到网络请求，再到数据解析和数据存储，再到反反爬虫和分布式爬虫，技术要点应有尽有。   一边学习一边实操实战项目，从易到难，打好基础，层层深入。不同的实战项目锻炼不同的技能点，让你牢牢掌握爬虫工程师的核心技能。课程以...
各种Tab标签页设计与实现：实战示例与要点分析
最新发布
weixin_36487018的博客
09-26 2254
本文还有配套的精品资源，点击获取 简介：网页设计中，Tab标签页通过简洁的用户界面提供信息组织和展示，改善用户体验和页面可读性。本文深入探讨Tab标签页的基本结构、实现技术、设计原则、自定义功能和移动端适配，以及流行的实现库和插件。掌握这些知识点对于创建高效、易用的Tab标签页至关重要，能够提升网页开发效率并优化用户体验。 1. Tab标签页基本结构介绍 在...
Html中tab的实现(3种类型)
zzc1684的博客
09-30 1493
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
HTML中的table标签属性
a1k2l45k的博客
06-19 4703
和和和
HTML页面简单TAB
07-22 229
简洁Tab <!-- 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-decora
解决vue-router 切换tab标签关闭时缓存问题
10-15
在`App.vue`中，我们通常会有一个`<router-view>`来承载实际的路由组件。为了实现缓存控制，我们可以使用条件渲染，将`<keep-alive>`包在`<router-view>`周围，根据`meta.keepAlive`属性决定是否启用缓存： ```html...
jQuery Tab标签自动左右切换特效代码
03-20
4. **使用帮助**：为了帮助开发者更好地理解和使用这个特效，可以提供一个使用指南，解释如何将这段代码集成到自己的项目中，包括引入jQuery库、设置HTML结构、添加CSS样式以及复制并粘贴上述jQuery脚本。...
jQuery tab标签列表.zip
07-05
本项目“jQuery tab标签列表.zip”聚焦于利用jQuery实现一个功能丰富的选项卡（Tab）切换效果。 选项卡（Tab）界面是网页布局中常见的一种设计模式，它将大量内容组织成多个独立的部分，通过点击不同的标签来显示...
Bootstrap 标签页（Tab）插件
12-14
在Bootstrap中，标签页的基本结构通常包含一个导航条（ul标签），其中包含多个链接（li标签内的a标签），每个链接对应一个内容区域（div标签）。这些链接通过"data-toggle"和"data-target"属性与相应的内容容器关联...
各种web的tab样式大全
03-04
这是web各种tab的实例，希望需要的人可以用上！
html5tab页
11-02
HTML5tab页特效，使用Jquery，实现蓝色特效，可修改。
html 实现tab切换的示例代码
11-19
tab切换在项目中也算是常用技术，一般实现tab切换都用js或者jq实现，今天介绍两种只用css实现tab切换方法： 方法一： 原理：通过label标签的关联属性和input的单选类型实现相应div的显示 1.创建一个类名为wrap的div当作容器 2.创建四个label标签，这将作为tab切换项 3.在每一个label中创建一个span标签（导航内容），input标签（实现选中于取消选中）type类型为radio，还要创建一个div作为这个导航项被点中是显示内容框， 这里要注意的是input标签的name必须是相同的，我这边取名叫tab 最终HTML为下面这样： <div class="w
富有弹性的导航栏
weixin_57203537的博客
04-18 201
富有弹性的导航栏 https://www.bilibili.com/video/BV1Jq4y1y7uy FROM:B站UP：艾恩小灰灰 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
tab标签页的实现
qq_33205354的博客
05-29 1547
我实现的比较简单，鼠标移上去和鼠标离开分别有函数，可能相对麻烦&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;title&gt;tab选项卡&lt;/title&gt;        &lt;style&gt;            
html tab标签_HTML标签介绍「程序员培养之路第一天」
weixin_39864601的博客
12-01 422
第一节 HTML基本结构1、HTML 标签是由<>包围的关键词，例：2、HTML 标签通常成对出现，分为标签开头和标签结尾，例： 3、有部分标签是没有结束标签，成为单标签，单标签内必须用 / 结尾，例：4、页面中所有的内容，都要放在HTML标签中5、HTML标签主题分为三个部分：标签名称、标签内容、标签属性6、HTML 标签具有语义化web7、语义化：就是仅通过标签名就能判断出该标签的...
简单丝的tab切换栏(html/CSS)
weixin_43811753的博客
10-03 3157
丝滑的tab导航按钮切换
用vue 写一个tab 切换
08-13
### 回答1： 这是一个使用 Vue.js 实现 tab 切换的简单代码示例： ``` <template> <div> <ul class="tab-header"> <li v-for="(tab, index) in tabs" :key="index" :class="{ active: currentTab === index }" @click="currentTab = index"> {{ tab.title }} </li> </ul> <div class="tab-content"> <slot :tab="tabs[currentTab]"></slot> </div> </div> </template> <script> export default { data() { return { currentTab: 0, tabs: [ { title: 'Tab 1', content: 'Tab 1 content' }, { title: 'Tab 2', content: 'Tab 2 content' }, { title: 'Tab 3', content: 'Tab 3 content' }, ], }; }, }; </script> <style> .tab-header { display: flex; list-style: none; margin: 0; padding: 0; } .tab-header li { padding: 10px; cursor: pointer; } .tab-header li.active { background-color: #ddd; } </style> ``` 在父组件中使用该组件： ``` <template> <tab-component> <template v-slot:default="{ tab }"> {{ tab.content }} </template> </tab-component> </template> <script> import TabComponent from './TabComponent.vue'; export default { components: { TabComponent, }, }; </script> ``` 该代码实现了一个通过单击标签切换内容的简单 tab 组件。 ### 回答2： 用Vue写一个tab切换可以使用Vue的组件和指令来实现。 首先，需要创建一个父组件，里面包含多个子组件和一个数据来记录当前选中的tab。可以使用v-for指令和数组来生成多个子组件，并使用v-bind指令来绑定当前选中的tab。 ```html <template> <div> <div class="tabs"> <div v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)" :class="{ active: activeTab === index }">{{ tab }}</div> </div> <div class="content"> <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">{{ tab }}</div> </div> </div> </template> <script> export default { data() { return { activeTab: 0, tabs: ['Tab 1', 'Tab 2', 'Tab 3'] }; }, methods: { selectTab(index) { this.activeTab = index; } } }; </script> ``` 父组件中有一个`activeTab`数据用来记录当前选中的tab，一个`tabs`数组用来存储所有的tab名称。 `<div class="tabs">`中使用`v-for`指令生成多个tab，同时使用`v-bind`绑定点击事件和样式，并通过`activeTab`判断是否选中当前tab。 `<div class="content">`中也使用`v-for`指令生成多个tab内容，使用`v-show`指令根据`activeTab`来显示当前选中的tab内容。 最后，在父组件中的`selectTab`方法中，通过点击事件来改变`activeTab`的值，从而实现tab切换的功能。 这样就实现了一个简单的tab切换功能。 ### 回答3： Vue是一种流行的JavaScript框架，可以用来构建交互式的Web界面。如果要使用Vue来编写一个Tab切换，可以按照以下步骤进行： 1. 首先，在Vue项目中安装并导入Vue库，可以使用命令"npm install vue"进行安装，并在JavaScript文件中导入Vue。 2. 在HTML文件中创建一个包含Tab切换的容器，可以使用div元素，并为其设置一个唯一的id属性。 3. 在JavaScript文件中，创建一个Vue实例，并将其关联到容器中。可以使用"new Vue()"语法来创建Vue实例，并使用el选项指定容器的id。 4. 在Vue实例的data选项中，定义一个变量来跟踪当前活动的Tab索引。可以设置默认值为0，表示初始状态下第一个Tab处于活动状态。 5. 在模板中，使用v-for指令遍历一个包含所有Tab标题的数组，并将每个标题显示为可点击的标签。可以在点击标签时，调用一个方法来更新当前活动的Tab索引。 6. 在模板中，使用v-show指令将只有当前活动Tab的内容显示出来，其他Tab的内容隐藏起来。可以使用当前活动的Tab索引来判断哪个Tab应该显示。 7. 最后，在CSS文件中定义样式来控制Tab标题和内容的外观，可以根据需要进行调整。 通过以上步骤，就可以使用Vue完成一个简单的Tab切换功能。可以随意添加更多的Tab，并根据实际需要进行样式和功能的定制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值