选项卡导航

最新推荐文章于 2024-11-13 01:18:00 发布
最新推荐文章于 2024-11-13 01:18:00 发布
阅读量485 收藏
点赞数
分类专栏： 效果收藏 文章标签： javascript url border div class float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panqingbiao/article/details/1748443
版权
<!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>选项卡导航</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font:12px Arial; text-align:center; padding:50px;}
/* jh */
.title li{ float:left; margin:auto; list-style:none; }
.title li a{color:#000; text-decoration:none; padding-left:30px; display:block; float:left; height:29px; line-height: 29px; text-align: center; background: url( http://blog.gulu77.com/demo/images/menuLeft.gif) no-repeat left -29px;}
.title li a span{ padding-right:30px; display:block; float:left; height:29px; line-height: 29px; text-align: center; background: url( http://blog.gulu77.com/demo/images/menuRight.gif) no-repeat right -29px;}
.title li a:hover{ background: url( http://blog.gulu77.com/demo/images/menuLeft.gif) no-repeat left bottom;}
.title li a:hover span{color:#f30; text-decoration:underline; background: url( http://blog.gulu77.com/demo/images/menuRight.gif) no-repeat right bottom;}
.title{ margin:auto; width:522px; height: 28px; text-align:left;}
.intabcurrent a{color:#fff!important;}
#aa .tabcurrent a{color:#fff; background: url( http://blog.gulu77.com/demo/images/menuLeft.gif) no-repeat left -87px;}
#aa .tabcurrent a span{background: url( http://blog.gulu77.com/demo/images/menuRight.gif) no-repeat right -87px;}
#aa .intabcurrent a{background: url( http://blog.gulu77.com/demo/images/menuLeft.gif) no-repeat left -87px;}
#aa .intabcurrent a span{background: url( http://blog.gulu77.com/demo/images/menuRight.gif) no-repeat right -87px;}
#bb .intabcurrent a{background: url( http://blog.gulu77.com/demo/images/menuLeft.gif) no-repeat left 0;}
#bb .intabcurrent a span{background: url( http://blog.gulu77.com/demo/images/menuRight.gif) no-repeat right 0;}
#cc .intabcurrent a{background: url( http://blog.gulu77.com/demo/images/menuLeft.gif) no-repeat left -58px;}
#cc .intabcurrent a span{background: url( http://blog.gulu77.com/demo/images/menuRight.gif) no-repeat right -58px;}
#dd .intabcurrent a{background: url( http://blog.gulu77.com/demo/images/menuLeft.gif) no-repeat left -145px;}
#dd .intabcurrent a span{background: url( http://blog.gulu77.com/demo/images/menuRight.gif) no-repeat right -145px;}
#ee .intabcurrent a{background: url( http://blog.gulu77.com/demo/images/menuLeft.gif) no-repeat left -232px;}
#ee .intabcurrent a span{background: url( http://blog.gulu77.com/demo/images/menuRight.gif) no-repeat right -232px;}
.box1,.box2,.box3,.box4,.box5{margin:auto; width:500px; height:100px; padding:10px; text-align:left; line-height:220%;}
.box1{ background:#DFEBF7; border:1px solid #3A81C8; border-top:3px solid #3A81C8;}
.box2{ background:#FFECD2; border:1px solid #FF950B; border-top:3px solid #FF950B;}
.box3{ background:#FFECF5; border:1px solid #FE74B8; border-top:3px solid #FE74B8;}
.box4{ background:#BCEFEA; border:1px solid #00988B; border-top:3px solid #00988B;}
.box5{ background:#E3B5FF; border:1px solid #C489E7; border-top:3px solid #C489E7;}
</style>
<SCRIPT language=javascript>
function selectAfiveLayer(i)
{
switch(i)
{
case 1:
document.getElementById("Afive1").style.display="block";document.getElementById("Afiveli1").className="intabcurrent";
document.getElementById("Afive2").style.display="none";document.getElementById("Afiveli2").className="";
document.getElementById("Afive3").style.display="none";document.getElementById("Afiveli3").className="";
document.getElementById("Afive4").style.display="none";document.getElementById("Afiveli4").className="";
document.getElementById("Afive5").style.display="none";document.getElementById("Afiveli5").className="";
break;
case 2:
document.getElementById("Afive1").style.display="none";document.getElementById("Afiveli1").className="";
document.getElementById("Afive2").style.display="block";document.getElementById("Afiveli2").className="intabcurrent";
document.getElementById("Afive3").style.display="none";document.getElementById("Afiveli3").className="";
document.getElementById("Afive4").style.display="none";document.getElementById("Afiveli4").className="";
document.getElementById("Afive5").style.display="none";document.getElementById("Afiveli5").className="";
break;
case 3:
document.getElementById("Afive1").style.display="none";document.getElementById("Afiveli1").className="";
document.getElementById("Afive2").style.display="none";document.getElementById("Afiveli2").className="";
document.getElementById("Afive3").style.display="block";document.getElementById("Afiveli3").className="intabcurrent";
document.getElementById("Afive4").style.display="none";document.getElementById("Afiveli4").className="";
document.getElementById("Afive5").style.display="none";document.getElementById("Afiveli5").className="";
break;
case 4:
document.getElementById("Afive1").style.display="none";document.getElementById("Afiveli1").className="";
document.getElementById("Afive2").style.display="none";document.getElementById("Afiveli2").className="";
document.getElementById("Afive3").style.display="none";document.getElementById("Afiveli3").className="";
document.getElementById("Afive4").style.display="block";document.getElementById("Afiveli4").className="intabcurrent";
document.getElementById("Afive5").style.display="none";document.getElementById("Afiveli5").className="";
break;
case 5:
document.getElementById("Afive1").style.display="none";document.getElementById("Afiveli1").className="";
document.getElementById("Afive2").style.display="none";document.getElementById("Afiveli2").className="";
document.getElementById("Afive3").style.display="none";document.getElementById("Afiveli3").className="";
document.getElementById("Afive4").style.display="none";document.getElementById("Afiveli4").className="";
document.getElementById("Afive5").style.display="block";document.getElementById("Afiveli5").className="intabcurrent";
break;
}
}
</SCRIPT>
</head>
<body>
<UL class="title">
<span id="aa"><LI class=tabcurrent id=Afiveli1><A href="javascript:selectAfiveLayer(1);" target=_self><span>首页</span></A></LI></span>
<span id="bb"><LI id=Afiveli2><A href="javascript:selectAfiveLayer(2);" target=_self><span>专区</span></A></LI></span>
<span id="cc"><LI id=Afiveli3><A href="javascript:selectAfiveLayer(3);" target=_self><span>皮肤</span></A></LI></span>
<span id="dd"><LI id=Afiveli4><A href="javascript:selectAfiveLayer(4);" target=_self><span>播放器</span></A></LI></span>
<span id="ee"><LI id=Afiveli5><A href="javascript:selectAfiveLayer(5);" target=_self><span>welcome欢迎动画</span></A></LI></span>
</UL>
<DIV id=Afive1 style="DISPLAY: block">
<div class="box1">首页111</div>
</DIV>
<DIV id=Afive2 style="DISPLAY: none">
<div class="box2">专区222</div>
</DIV>
<DIV id=Afive3 style="DISPLAY: none">
<div class="box3">皮肤333</div>
</DIV>
<DIV id=Afive4 style="DISPLAY: none">
<div class="box4">播放器444</div>
</DIV>
<DIV id=Afive5 style="DISPLAY: none">
<div class="box5">欢迎动画555</div>
</DIV>
</body>
</html> 
panqingbiao
关注
专栏目录
3.Bootstrap组件
wxhua420701325的博客
10-25 1610
栅格系统。
引入BootStrap框架编写选项卡导航栏导致的选项卡堆在一起的问题
江西师范大学-20届-吴悠
05-29 524
最开始代码如下： <!-- Nav tabs --> <ul class="nav nav-tabs nav-justified" role="tablist"> <li> <a href="#home">Home</a> </li> <li> <a" href="#...
CSS+JS选项卡式导航菜单
03-18
NULL 博文链接：https://gucy.iteye.com/blog/656366
胶囊动态选项卡
weixin_30675967的博客
06-13 518
<html> <head> <title>Bootstrap 实例 - 基本的胶囊式导航菜单</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script sr...
零基础Bootstrap入门教程(20)--选项卡式导航、胶囊式导航、面包屑导航
程序员大阳
02-28 3348
本文目录1. 概述2. 选项卡式导航2.1 普通选项卡导航2.2 等宽选项卡导航3. 胶囊式导航3.1 普通胶囊式导航3.2 垂直胶囊式导航4. 面包屑导航5. 小结 1. 概述 Bootstrap提供了多种导航控件，本篇就来介绍下常用的选项卡式导航、胶囊式导航及面包屑导航。 2. 选项卡式导航 2.1 普通选项卡导航 选项卡式导航，顾明司仪，看起来就像多个选项卡，基本用法如下： 选项卡式导航 <nav> <
左侧竖向选项卡导航栏
qq_39512601的博客
07-21 2342
模仿唯品会的一个竖向导航栏 选项卡,效果图： html代码 <div id="TabMain"> <div class="tabItemContainer"> <li><a class="tabItemCurrent">裙装/套装</a></li> <li&g...
2.19 使用选项卡导航
11-05
在Android应用开发中，选项卡导航是一种常见的设计模式，它帮助用户通过不同的视图或功能区域轻松地在应用内切换。标题"2.19 使用选项卡导航"指的是如何在不依赖Google官方提供的框架或支持库的情况下，在侧向屏幕...
JS+CSS实现的日本门户网站经典选项卡导航效果
10-23
在探讨如何用JS（JavaScript）和CSS（层叠样式表）实现日本门户网站风格的选项卡导航效果时，我们首先要了解页面元素动态遍历及样式动态修改的技巧。这两种技术共同作用，使得我们能够创建动态且响应式的用户界面。 ...
jQuery粘性选项卡导航特效.zip
11-19
jQuery作为一款强大的JavaScript库，提供了丰富的功能来增强用户体验，其中之一就是实现“粘性”选项卡导航特效。这个"jQuery粘性选项卡导航特效.zip"文件包含了一套实现这种效果的代码和资源。 “粘性”导航，...
react-native-navigation-bug：选项卡导航的解决方法
02-20
针对“react-native-navigation-bug：选项卡导航的解决方法”这个主题，我们将深入探讨在React Native中处理选项卡导航可能遇到的问题以及解决方案。 1. **选项卡导航基础** 在React Native中，选项卡导航是一种...
Bootstrap 组件---导航（选项卡导航）
qazwsx_edc1的博客
07-20 2464
&lt;!--使用.nav-tabs类可将将导航转换为选项卡       如果要设置选项卡动态可切换，可以在每个链接上添加data-toggle="tab"属性，然后在每个选项对应的内容上添加.tab-pane类       &lt;ul class="nav nav-tabs"&gt;         &lt;li class="nav-item"&gt;           &lt;a..
APP设计中的选项卡式（tab）导航
05-15 7540
在我们的产品中，导航起到了举足轻重的作用。导航相信大家都不陌生，它可以让我们知道“我现在在哪里”“我可以去哪里”“我怎么去目的地”。在手机端里面，导航尤为重要。因为手机的尺寸问题，在设计手机网站或APP的时候，比起web端的需要考虑的更周全，尽量保持简约和易用性高。 选项卡式（tab）导航可以说是最常见的导航了，尤其是APP。大部分的APP都采用这种导航模式作为主导航，有时也会将tab导航和其他的...
bootstrap的胶囊式导航菜单
weixin_34163741的博客
11-25 2752
从网上找到了一个胶囊式的导航菜单，但是运行之后发现，并不能实现切换的功能（选中另一个菜单，上一个菜单的高亮背景取消，新选中的菜单高亮背景显示），是因为缺少js实现切换功能，现在小编告诉大家如何使用js实现菜单切换。原胶囊式菜单地址：http://www.ziqiangxuetang.com/try/bootstrap3-navigation-basicpills/加入js能切...
手写胶囊式导航和下拉切换效果
weixin_34392843的博客
03-06 364
<h1>下拉切换效果</h1> <div id="dropdown"> 　　<button >添加商品</button> 　　<ul> 　　　　<li>生活家居</li> 　　　　<li>生活用品</li> 　　　　<li>数码电器</li&gt...
bootstrap+jq实现标签式/胶囊式导航栏（进阶特效版本）
Sitwoold的博客
12-09 2161
   Bootstrap+jq    实现标签式/胶囊式导航栏（进阶特效版本） &lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;index&lt;/title&
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
最新发布
zhzijun的博客
11-13 348
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 112
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Vue中的常用指令
m0_62388400的博客
11-12 934
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
h5的选项卡导航栏怎么写
05-24
实现选项卡导航栏可以采用HTML、CSS和JavaScript等技术。 HTML部分： ```html <div class="tab active" data-tab="tab1">Tab 1 <div class="tab" data-tab="tab2">Tab 2 <div class="tab" data-tab="tab3">Tab...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值