页签示例

最新推荐文章于 2023-05-15 11:33:44 发布
最新推荐文章于 2023-05-15 11:33:44 发布
阅读量4.6k 收藏
点赞数
分类专栏： html css 文章标签： 页签 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxfwolfkings/article/details/49588305
版权
html 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏


页签是网站开发中经常用到的控件，主流做法是无序列表样式设置，和导航菜单基本是一样的。这是一个页签的小例子。

<html>
<head>
	<title>页签示例</title>
	<style type="text/css">
		#tab_div{
			height: 26px;
			line-height: 26px;
			position: relative;
		}
		#menu
		{
			margin: 0px;
			padding: 0px;
			list-style: none;
			height: 25px;
			text-align: center;
			position: absolute;
			top: 0px;
			left: 0px;
		}
		#menu li
		{
			float: left;
			display: block;
			cursor: pointer;
			width: 90px; 
			height: 25px;
			line-height: 25px;
			margin-left: 1px;
		}
		#menu li.onhover
		{
			padding: 0px;
			background: #fff;
			width: 90px;
			height: 25px;
			line-height: 25px;
			border-top: 3px solid #4fa9f6;
			border-left: 1px solid #4fa9f6;
			border-right: 1px solid #4fa9f6;
			font-weight: bold;
		}
		#menu li.nothover
		{
		}
		#menu li a.onhover
		{
			/*color:black; */
			color: #4fa9f6;
			text-decoration: none;
		}
		#menu li a.nothover
		{
		}
	</style>
	<script>
		function clickPage(index){
			var pages = document.getElementById('menu').getElementsByTagName('li');
			var divArr = document.getElementsByName("SinglePage");
			for(var i=0;i<pages.length;i++){
				if(i==index){
					pages[i].className = 'onhover';
					divArr[i].style.display = 'block';
				}else{
					pages[i].className = 'nohover';
					divArr[i].style.display = 'none';
				}
			}
		}
	</script>
</head>
<body>
		<div id="tab_div">
        <ul id="menu">
            <li class="nohover" style="margin-left: 5px;" οnclick="clickPage(0)">页签1</li>
            <li class="nohover" οnclick="clickPage(1)">页签2</li>
            <li class="onhover" οnclick="clickPage(2)">页签3</li>
            <li class="nohover" οnclick="clickPage(3)">页签4</li>
            <li class="nohover" οnclick="clickPage(4)">页签5</li>
            <li class="nohover" οnclick="clickPage(5)">页签6</li>
        </ul>
    </div>
    <br />
    <div id="tab0" name="SinglePage" style="display:none">页签1内容</div>
    <div id="tab1" name="SinglePage" style="display:none">页签2内容</div>
    <div id="tab2" name="SinglePage">页签3内容</div>
    <div id="tab3" name="SinglePage" style="display:none">页签4内容</div>
    <div id="tab4" name="SinglePage" style="display:none">页签5内容</div>
    <div id="tab5" name="SinglePage" style="display:none">页签6内容</div>
</body>	
</html>

cxfwolfkings
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个页面多个页签的实现（css样式）
fly0744的专栏
02-24 6992
html源码： 无标题文档 #tabs { overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; } #tabs li { float: left; margin: 0 .5em 0 0; } #tabs a { positi
HTML页面中添加Canvas标签示例
09-28
主要介绍了HTML页面中添加Canvas标签示例,本文直接给出示例代码,并讲解了一些重要属性和js访问方法,需要的朋友可以参考下
多款精美的tab页签样式任你挑选
05-12
多款好看的tab页签样式，希望对你有所帮助
从零开始Vue3+Element Plus后台管理系统(七)——手写一个简单的多页签组件
immocha的博客
05-15 1737
以前都是用别人现成的多页签组件，自己也想尝试下做个Vue3的版本，目前还只有基本功能，慢慢完善。
如何添加页签_tab页签最好给出几个？
weixin_34915171的博客
01-14 3355
1/3什么是tabtab(Module-Tabs)，选项卡，也称为页签。指将不同内容重叠放在一个布局中，每次只有一个内容可见在移动端的应用↓哔哩哔哩漫画-tab页签在web的应用↓携程-tab页签2/3讨论7±2法则又称米勒定律，是美国心理学家George A. Miller1956年发布的论文中提到的现象：无论是一串数字、房间里的物品、一列单词，还是重叠的声响——统统都只有7项可以被塞...
【Vue】标签页el-tabs常用写法
热门推荐
慕白Lee的博客
03-19 1万+
【代码】Vue页签的常用写法。
Fiddler Inspectors页签介绍
weixin_43833100的博客
11-02 650
    完整页签如下图：     Inspectors 页签中，可以用多种不同格式查看每个请求和响应的内容。     Inspectors 页签分为上下两部分，上部显示的是发出的请求相关信息，下部显示的是接收的响应相关信息。 一、 请求 (Request) 部分     1. Headers——显示客户端发送到服务器的 HTTP 请求的 head
web前端 --- 常见页面标签和语义化标签
weixin_62443409的博客
06-14 2427
（1）简介： 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 HTML 是用来描述网页的一种语言。HTML 标记标签通常被称为 HTML 标签 (HTML tag)。"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:HTML 元素: （代码插入）
金蝶EAS编辑界面的弹窗模式与页签模式
a172603466的博客
09-16 767
弹窗模式 指在序时簿界面（ListUI）点击新增后，编辑界面（EditUI）以新窗口的形式出现。 页签模式 指在序时簿界面（ListUI）点击新增后，编辑界面（EditUI）以页签的形式出现。 代码实现 在ListUI中重写getEditUIModal方法： @Override protected String getEditUIModal(){ //返回的弹窗模式-页签模式 return UIFactoryName.NEWTAB; //UIFactoryNa.
页面示例页面示例页面示例
08-01
这里我们探讨的"页面示例"可能是指一个用于演示或测试的网页布局或设计。从提供的标签"页面示例"来看，我们将围绕网页设计的基础元素和相关技术进行详细解释。 首先，我们关注的是`css.css`，这是一个CSS...
一个页面多个页签显示
04-28
一个页面多个页签显示，这里只是提供一个样式，具体功能根据需求写。
Java Web 项目通用灵活分页标签(王总大气)
03-07
《Java Web 项目通用灵活分页标签》是一套可用于任何Java Web项目的通用标签，可用在各个项目中独立使用灵活性高，可灵活配置分页的主题样式、长度、模式等。
js动态创建标签示例代码
10-25
在给出的示例代码中，我们使用了jQuery库，它是一个流行的JavaScript库，简化了DOM操作。如果你不熟悉jQuery，也可以使用原生JavaScript来完成同样的任务，但这里我们主要讨论使用jQuery的方法。 代码的核心部分...
样式标签示例 div
03-03
不同层之间进行切换，页面效果挺不错！而且用起来也特方便！
Web前端小知识：页面标签作用
蚂蚁
04-11 2350
基础知识 2B : 商户，什么管理系统，后台系统。 管理员上传产品：一般是商户管理员操作，PC端 自己人 一个项目来说，功能有就行了，好不好用再说吧。 2C： 用户，什么商城 用户在商城里面购买了什么商品 别人：用户， 页面需要做的好看，功能也必须齐全。 java开发：除了后台功能的开发。 2B页...
1.1 css style 样式定义：行内 style 属性、单页 ＜style＞ 标签、多页 ＜style＞ 标签
一个字，学
03-15 6606
把长宽等样式定义在某个标签的属性中，仅对当前标签产生影响，如：style 里面不能省略掉像素单位 px两种定义属性的方式：不用 style：用 style：此时一般把 定义在 标签里面：标签中的样式可以对该页面的同一类/多类元素产生影响：除了直接对某类标签统一设置样式，还可以结合 class 属性分类设置样式：class 类名可以多个组合在一起： 3.多页 标签：对多个页面产生影响 在 css 文件夹中新建 文件，把单页 标签里面的内容剪切进来，然后回到 标签 里面添加 标签，就能对多个页面产
js实现的页签
03-07 3604
大家在进行web开发的时候,经常会遇到这样的问题,就是数据量很大,在页面显示,需要多个表单,并且,如果一页显示的话,需要用户滚动才能查看或编辑数据,带来交互和查阅的不友好,大家肯定会想到用tab页签去实现,虽然jsp和.net的高版本已经进行了集成,但是由于操作或者效率上面的原因,始终不能完美的呈现,下面我给大家共享一个js+css实现的页签,希望能给大家带去方便 html代码:
excel页签下标的值分别是多少
qq_30908729的博客
06-19 216
excel页签下标的值分别是多少（java） 解决方法： 2003版本的xls文件的第一页的页签下标是：0 第二页的页签下标是：1，以此类推。 2007版本的xlsx文件的第一页的页签下标是：http://www.yayihouse.com/yayishuwu/chapter/1981 ...
JS实现简单的登录注册页签
Fleehom的博客
09-04 5213
项目要求： 利用前端知识编写一个简单的网站登录和注册页签。登录和注册功能均在同一页面，点击登录按键就进入登录操作，点击注册按键则进入用户的注册操作。其中，登录和注册的内容和大部分网站的登录注册内容一直相同即可。 项目编写： 因为我们要实现一个页签，那就必须要先编写一个前端展示界面。那就将HTML和CSS结合运用起来即可，具体如下图： <div class="container"> <div class="form"> <ul>
input标签的示例页面
最新发布
06-03
好的，下面是一个简单的 input 标签的示例页面，代码如下： ```html <!DOCTYPE html> <html> <head> <title>Input标签示例页面</title> </head> <body> <form> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <br><br> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <br><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email" required> <br><br> <input type="submit" value="提交"> </form> </body> </html> ``` 这个示例页面包含了三个 input 标签，分别是用于输入用户名、密码和邮箱。其中，用户名和密码使用了 `type="text"` 和 `type="password"` 属性，而邮箱则使用了 `type="email"` 属性。另外，所有的 input 标签都使用了 `required` 属性，表示这些字段是必填的。最后，页面中还有一个提交按钮，用于提交表单数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值