选项卡实现

最新推荐文章于 2022-10-24 17:31:20 发布
最新推荐文章于 2022-10-24 17:31:20 发布
阅读量107 收藏
点赞数
分类专栏： HTML 文章标签： XHTML
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
<!--
* {
margin: 0; padding:0
}
body {
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
text-align: center;
height: auto;
width: auto;
background-color: #666666;
font-size: 12px;
color: #000000;
}
#container {
text-align: left;
width: 800px;
height: 400px;
background-color: #FFFFFF;
padding: 20px;
}

#container #title {
height: 28px;
}
#container #title li {
float: left;
list-style-type: none;
height: 28px;
line-height: 28px;
text-align: center;
margin-right: 1px;
}
#container #title ul {
background-color: #FFFFFF;
height: 28px;
}
#container #title a {
text-decoration: none;
color: #000000;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -29px;
}
#container #title a span{
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -29px;
padding: 0 15px 0 15px;
}
#container #title #tag1 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -87px;
padding: 0 15px 0 15px;
}
#container #title #tag2 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right 0px;
padding: 0 15px 0 15px;
}
#container #title #tag3 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -58px;
padding: 0 15px 0 15px;
}
#container #title #tag4 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -145px;
padding: 0 15px 0 15px;
}
#container #title #tag5 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #title .selectli1 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -87px;
}
#container #title a .selectspan1 {
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -87px;
padding: 0 15px 0 15px;
}
#container #title .selectli2 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left 0px;
}
#container #title a .selectspan2 {
display: block;

background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right 0px;
padding: 0 15px 0 15px;
}
#container #title .selectli3 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -58px;
}
#container #title a .selectspan3 {
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -58px;
padding: 0 15px 0 15px;
}
#container #title .selectli4 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -145px;
}
#container #title a .selectspan4 {
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -145px;
padding: 0 15px 0 15px;
}
#container #title .selectli5 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://img293.imageshack.us/img293/1049/tabselectedleftbk2up3.jpg) no-repeat left -174px;
}
#container #title a .selectspan5 {
display: block;
background: url(http://img293.imageshack.us/img293/4991/tabselectedrightbk2vd2.jpg) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
height: 150px;
padding: 10px;
}
.content1 {
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #66A9E6;
border-right-color: #66A9E6;
border-bottom-color: #66A9E6;
border-left-color: #66A9E6;
background-color: #fafafa;
}
.content2 {
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #66A9E6;
border-right-color: #66A9E6;
border-bottom-color: #66A9E6;
border-left-color: #66A9E6;
background-color: #fafafa;
}
.content3 {
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #66A9E6;
border-right-color: #66A9E6;
border-bottom-color: #66A9E6;
border-left-color: #66A9E6;
background-color: #fafafa;
}
.content4 {
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #66A9E6;
border-right-color: #66A9E6;
border-bottom-color: #66A9E6;
border-left-color: #66A9E6;
background-color: #fafafa;
}
.content5 {
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #66A9E6;
border-right-color: #66A9E6;
border-bottom-color: #66A9E6;
border-left-color: #66A9E6;
background-color: #fafafa;
}
.hidecontent {display:none;}
-->
</style>
<script language="javascript">
function switchTag(tag,content)
{
// alert(tag);
// alert(content);
for(i=1; i <6; i++)
{
if ("tag"+i==tag)
{
document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
}else{
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
}
if ("content"+i==content)
{
document.getElementById(content).className="";
}else{
document.getElementById("content"+i).className="hidecontent";
}
document.getElementById("content").className=content;
}
}
</script>
</head>

<body>
<div id="container">
<div id="title">
<ul>
<li id="tag1"><a href="#" οnclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1"> 选项一</span></a></li>
<li id="tag2"><a href="#" οnclick="switchTag('tag2','content2');this.blur();"><span>选项二</span></a></li>
<li id="tag3"><a href="#" οnclick="switchTag('tag3','content3');this.blur();"><span>选项三</span></a></li>
<li id="tag4"><a href="#" οnclick="switchTag('tag4','content4');this.blur();"><span>选项四</span></a></li>
<li id="tag5"><a href="#" οnclick="switchTag('tag5','content5');this.blur();"><span>选项五</span></a></li>
</ul>
</div>
<div id="content" class="content1">
<div id="content1"><p>NBA</p>乔丹</div>
<div id="content2" class="hidecontent">韦德</div>
<div id="content3" class="hidecontent">詹姆斯</div>
<div id="content4" class="hidecontent">科比</div>
<div id="content5" class="hidecontent">保罗</div>
</div>

</div>
</body>
</html>
kksxl
关注
专栏目录
java web网页的多窗口打开选项卡形式
11-23
在一个页面中可同时打开多个页面，成选项卡的形式
javascript 通用简单的table选项卡实现
10-29
这个例子中，我们看到一个针对表格（table）的选项卡实现方法，它旨在减少重复的JavaScript代码，提高代码复用性和质量。下面我们将详细探讨这个实现过程及其关键知识点。 首先，我们需要在HTML文件中引入`table.js...
选项卡java代码_Java 水平显示的选项卡（JTabbedPane）源码举例
weixin_39641386的博客
02-26 81
运行结果： package tab;import java.awt.Component;import java.awt.GridLayout;import java.awt.event.KeyEvent;import java.net.URL;import javax.swing.ImageIcon;import javax.swing.JFrame;import javax.swing.JPan...
uniapp纵向选项卡实现
bbt953的博客
05-06 1617
如图所示，当需要实现这样式的纵向选项卡时，可以用uniapp里面的scroll-view可滚动视图区域 <!-- 左侧的滑动区域 --> <scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}"> </scroll-view> <!-- 右侧的滑动区域 --> <scroll-view class="right-scroll-view" scro.
jquery实现选项卡
huai42717的博客
10-24 1693
jquery实现选项卡
选项卡实现过程.rar
06-14
这个简单的示例展示了如何通过JavaScript实现选项卡功能，当用户点击不同的选项卡头时，对应的标题栏内容会被显示出来。通过结合HTML的结构、CSS的样式控制和JavaScript的交互逻辑，我们可以创建出符合用户需求的、...
bootstrap导航、选项卡实现代码
12-29
本文实例为大家分享了bootstrap导航和选项卡的具体代码，供大家参考，具体内容如下 导航： <!-- nav 导航的基础样式 --> <li><a>雪碧图</a></li> <li class=active><a>可乐</a></li> <li><a>coffee...
通过onmouseover选项卡实现img图片的变化
12-10
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...选项卡实现img图片的变换</title> <style type=”text/css”
jQuery实现Tab选项卡切换效果简单演示
10-23
在本文中，作者详细演示了如何使用jQuery实现Tab选项卡切换效果。Tab选项卡是一种常用的用户界面元素，它允许用户通过点击不同的标签来切换显示不同的内容区域，而不需要刷新页面。这种效果在内容管理系统、网络商店...
选项卡（一个最常见的网页组件）
weixin_34301132的博客
09-13 241
　　 　　相信很多人都有见过网页中的格式各样的选项卡，感觉都差不多，但是对于每个写这些选项卡代码的程序员哥哥，我相信，每个人思路和实现方式应该会有差异。即使思路一样，可能代码实现也是不尽相同的。相信程序员哥哥的创造能力。 　　话不多说，上来看图(上图)整体感觉如此，对于颜色有洁癖的设计师门请留情。 　　先来说动态效果，鼠标移入头部的控制器部分，下面的内容部分对应切换，注意这里有两个微交互的效...
java界面：JTabbedPane选项卡面板
he13733625052的博客
07-27 2726
通常在写一个小东西时会创建许多的窗口，我觉得如果窗口一个一个跳出来看着不是很舒服，选项卡面板可以让他们放在一个窗口上。 JTabbedPane容器为中间容器，当用户向JTabbedPane容器添加一个组件时，JTabbedPane容器就会自动为该组件指定一个对应的选项卡，即让一个选项卡对应一个组件。 publicComponentadd(Componentcompone...
java网页选项_基于JS实现网页中的选项卡（两种方法）_javascr
weixin_30978427的博客
02-13 338
网页中经常会用到选项卡这种东东，说白了就是点击一个选项，下面会弹出这个选项里的内容。方法一：方法一利用简单的代码即可实现，以下是全部的代码；选项卡*{margin: 0;padding: 0;}#box{width: 600px;background: #ccc;margin: 0 auto;}li{list-style: none;}#ul1{display: block; width: 100...
java将页面添加到选项卡中_Java Swing JTabbedPane：选项卡组件
weixin_42369343的博客
02-25 596
使用选项卡可以在有限的布局空间内展示更多的内容。Swing使用 JTabbedPane 类实现选项卡。JTabbedPane 类创建的选项卡可以通过单击标题或者图标在选项卡之间进行切换。JTabbedPane 类的常用构造方法如下所示。JTabbedPane()：创建一个具有默认 JTabbedPane.TOP 布局的空 TabbedPane。JTabbedPane(int tabPlacemen...
jdk-1.8(8u211-windows-x64)
10-07
jdk-8u211-windows-x64
光储并网直流微电网simulink仿真模型，光伏采用mppt实现最大功率输出 储能由蓄电池和超级电容构成的混合储能系统 为了
10-07
光储并网直流微电网simulink仿真模型，光伏采用mppt实现最大功率输出。 储能由蓄电池和超级电容构成的混合储能系统。 为了确保微网并网时电能质量，采用二阶低通滤波法对光伏输出功率进行抑制，
失物招领信息交互平台 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS）.zip
最新发布
10-07
失物招领信息交互平台 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS） 启动教程：https://www.bilibili.com/video/BV1GK1iYyE2B
AngularJS MVVM选项卡实现详解
总结来说，AngularJS通过其MVVM架构和数据绑定特性，提供了更优雅、可维护的选项卡实现方式。相比jQuery，它降低了代码的复杂性，使得开发者能更专注于业务逻辑，而不是DOM操作。这使得AngularJS成为构建大型、动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值