选项卡

最新推荐文章于 2024-07-18 20:18:47 发布
最新推荐文章于 2024-07-18 20:18:47 发布
阅读量787 收藏
点赞数
分类专栏： js 文章标签： xhtml tags url class html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HHQSY/article/details/6877465
版权
 <!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>
<title>自适应宽度的标签导航</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>
BODY {
 FONT-SIZE: 12px;
 FONT-FAMILY: "宋体"
}
#con {
 FONT-SIZE: 12px;
 margin: 0px auto;
 WIDTH: 600px;
 
}
#tags {
 padding: 0px 0px 0px 30px;
 height: 26px;
 border-bottom:#eead2f 2px solid;
}
#tags li {
 background: url(kbqbb_tab.gif) no-repeat left bottom;
 float: left;
 margin-right: 5px;
 list-style: none;
 height: 26px;
 cursor:pointer;
}
#tags li span {
 padding-right: 10px;
 background: url(kbqbb_tab.gif) no-repeat right bottom;
 float: left;
 COLOR: #999;
 line-height: 26px;
 height: 26px;
 text-decoration:none;
 margin-left:10px;
}
#tags li.selectTag {
 background-position: left top;
 margin-bottom: -2px;
 position: relative;
 height: 28px;
}
#tags li.selectTag span {
 background-position: right top;
 color:#e17439;
 font-weight:bold;
 line-height: 28px;
 height: 28px;
}
</STYLE>
</head>
<body>
<div id="con">
  <ul id="tags">
    <li><span onClick="selectTag('tagContent0',this)">业务消息</span></li>
    <li class="selectTag"><span onClick="selectTag('tagContent1',this)">船民消息</span></li>
    <li><span onClick="selectTag('tagContent2',this)">可变情报板消息</span></li>
  </ul>
</div>
<SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
 // 操作标签
 var tag = document.getElementById("tags").getElementsByTagName("li");
 var taglength = tag.length;
 for(i=0; i<taglength; i++){
  tag[i].className = "";
 }
 selfObj.parentNode.className = "selectTag";
 // 操作内容 
}
</SCRIPT>
</body>
</html>
昵称不能为空噢噢噢噢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS选项卡
xing942012的博客
11-25 2434
我们做一个简易的选项卡，但是适用所有的选项卡（自改），首先我们来先把页面基本样式写好 <ul> <li class="active">周一</li> <li>周三</li> <li>周五</li> </ul> <div class="box1 block">医务科</div> <div class="box2">警卫科</div>
6.6 创建选项卡窗体（上）
复行数十步
12-16 2255
目录 1．选项卡窗体的类型 2．创建独立型选项卡窗体 在通常情况下，计算机中管理的信息非常多，应用选项卡控件可以在窗口的有限空间中，高效地管理更多的信息。选项卡不仅广泛地应用在Windows操作系统本身，而且还普遍应用在Office中。在Access系统同样也应用广泛，例如窗体的属性表就是一个典型的应用。 除了选项卡控件之外，Access还提供了分页控件，两者都是对窗体界面进行分页。分页控件实现竖直方向的分页，与Word中的分页符相似，而选项卡控件则实现在水平方向的分页...
js实现选项卡
qq_52440306的博客
09-23 6914
选项卡在网页中经常使用，那么如何实现选项卡呐？ 现在的框架省去dom操作，开发者只需要关注数据即可，那么真的不需要操作dom了吗，是需要的，只不过程序已经帮忙做了这件事，纯粹的数据逻辑也将前端变得更难了。 整体结构 <div class="app" id="app"> <div class="key-left"> <div class="tap">1</div> <div class="tap">2</div>
LayUI动态选项卡的使用
weixin_74268571的博客
07-12 3382
选项卡（Tab）是指Web浏览器中显示多个网页或文档的标签式界面。每个选项卡相当于一个独立的窗口。选项卡的详细使用步骤。
mui底部选项卡切换功能
wJulio的博客
07-08 2780
mui底部选项卡实现切换功能 <!-- main.html 入口文件 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devi...
计算机的选项卡,电脑的选项卡是什么?在哪里可以找出
weixin_39896617的博客
07-28 2558
依次点击“文件”菜单/“页面设置”，在“页面设置”对话框第三个选项卡就是“版式”选项卡(第一个是“页边距”，第二个是“纸张”，第四个是“文档网格”)。点击“版式”选项卡右上的“？”就可以打开页面设置的帮助信息，下方有包括版式选项卡在内的四项，点其中的“版式选项卡”就可以看到以下帮助信息：节节的起始位置 列出 Microsoft Word 开始新的文档节的位置。取消尾注 禁止在当前节中打印尾注。该选...
QTabWidget 类 (选项卡部件)
zxf347085420的博客
09-19 1860
③、 tabShape： TabShape 访问函数： TabShape tabShape() const;6、 QTabWidget 类中的属性和函数大多与 QTabBar 中的属性和函数是相同的，对于相同的属。 以上函数表示，把页面部件 page 和具有文本 label 和(或)图标 icon 的选项卡。此属性描述选项卡的形状，该属性对应于 QTabBar 的 shape 属性，其外观可参阅该类。以上信号表示，单击或双击 index 处的选项卡时发送此信号， index 是单击选项卡的索。
Layui-选项卡
weixin_54668937的博客
03-08 3782
Layui-选项卡 文献种类：专题技术文献； 开发工具与关键技术： VS、JS 作者：方建恒 ；年级：20级 ；撰写时间： 2022 年 3 月 8日 在一些网页的制作中，往往会用到选项卡切换的功能， 今天我们就来了解一下如何运用Layui的选项卡组件。 首先我们要把layui的js和css引入，如图： 接下来是HTML部分： 我们用ul标签把选项卡的头部包裹起来， 再用div标签把选项卡的内容包裹起来，如图： 接下来是script部分： 因为tab组件依赖于element组件，所
jquery实现选项卡
huai42717的博客
10-24 1677
jquery实现选项卡
python GUI开发: tkinter选项卡，移动滑块，颜色选择框，文本对话框，对话输入框，通用消息框模块用法详解
热门推荐
景天科技苑
06-18 1万+
tkinter选项卡，移动滑块，颜色选择框，文本对话框，对话输入框，通用消息框模块用法详解
fragment实现选项卡界面
11-24
而这种底部选项卡的风格界面的实现也由ActivityGroup转向了Fragment。先了，费话不多说了，下面我会一步一步教您怎么实现这个界面。在动手之前，我可能需要把我做好的样式图给你看一下，以遍让您有一个心里预期。
layui选项卡效果实现代码
08-30
layui选项卡效果实现代码 layui是一个前端UI框架，提供了多种实用的UI组件和功能，选项卡效果是其中之一。本文将详细介绍layui选项卡效果的实现代码。 一、layui选项卡效果的基本实现 layui选项卡效果的基本实现...
Bootstrap选项卡动态切换效果
09-01
Bootstrap选项卡动态切换效果是网页设计中常用的一种交互方式，它允许用户在多个视图间轻松切换，无需刷新整个页面。在本示例中，主要关注的是如何在Bootstrap框架下实现登录和注册功能的选项卡切换。 首先，我们来...
Android开发之选项卡功能的实现方法示例
08-30
在Android应用开发中，选项卡（Tab）功能是一种常见的用户界面设计，它允许用户在不同的视图或功能之间轻松切换。在本示例中，我们将深入探讨如何在Android应用中实现选项卡功能，主要使用`TabHost`组件。`TabHost`...
web前端基础面试85题（一）
柯晓楠
07-18 562
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
Web开发：四角线框效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-17 906
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
使用 XPath 定位 HTML 中的 img 标签
Z_suger7的博客
07-18 1184
通过本文的介绍和代码示例，我们可以看到如何在 C# 中使用 XPath 定位 HTML 中的img标签，并实现图片的下载。这种方法不仅高效，而且易于实现，适用于各种需要从网页中提取图片资源的场景。希望本文能够为你的项目提供帮助，并激发你在数据处理和自动化方面的创新思维。
前端学习（二）之HTML
最新发布
2302_79795489的博客
07-18 929
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
tkinter 选项卡
05-22
Tkinter 选项卡是 Tkinter 提供的一个组件，可以让用户在多个选项之间切换。每个选项卡都有一个标题，用户可以点击标题来选择相应的选项卡。选项卡通常用于将相似的内容分组显示，以便用户可以更方便地浏览和操作。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值