`

css竖向tab

    博客分类:
  • css
阅读更多
<!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=utf-8" />
<title>jQuery Tabs By Await http://leotheme.cn/</title>
<style>
* { margin:0 auto; padding:0; font-family:"宋体",Arial, Helvetica, sans-serif; font-size:12px; }
ul { list-style: none;}
p {width: 450px; border:1px solid #88AAD6; padding: 5px 10px; text-align: right;}
.tabbox{ position: relative; width:450px; height: 140px; margin:0 auto; border:1px solid #88AAD6; margin-top: 100px; padding: 10px;}
.tabnavi { position: relative; left: 0; top: 0; z-index: 999; float: left;}
.tabnavi li{ width:80px; height:24px; font-weight:bold; line-height: 24px; margin: 10px 0; border:1px solid #88AAD6; background:#eeeeff; color:#999; text-align:center;}
.tabnavi li.current{ background:#fff; border-right: 1px solid #fff; color:#290052; }
.tabContent{ position: relative; z-index: 99;float:left; margin-left: -1px; border:1px solid #88AAD6; padding:10px; width:347px; height:120px; }
.clear {clear: both;}
</style>
<script type="text/javascript" src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script>
<script>
$(function(){
   $(".tabContent div:not(:first)").hide();
   $(".tabnavi li").each(function(index){
       $(this).click(
	   	  function(){
			  $(".tabnavi li.current").removeClass("current");
			  $(this).addClass("current");
			  $(".tabContent > div:visible").hide();
			  $(".tabContent div:eq(" + index + ")").show();
	  })
   })
})
</script>
</head>
<body>
<div class="tabbox">
	<ul class="tabnavi">
		<li class="current">首页</li>
		<li>关于</li>
		<li>相册</li>
	</ul>
	<div class="tabContent">
		<div>http://leotheme.cn/</div>
		<div>http://leotheme.cn/about</div>
		<div>http://leotheme.cn/photo</div>
	</div>
	<div class="clear"></div>
</div>
<p>By Await 2009:06:11</p>
</body>
</html>
 

 

分享到:
评论

相关推荐

    又一款强大的竖向tab切换焦点图效果

    总的来说,"竖向tab切换焦点图效果"是网页设计中一种实用且美观的交互手段,它结合了HTML、CSS、JavaScript等技术,旨在提升用户在网页上的导航体验。通过精心设计和优化,我们可以创造出既高效又吸引人的界面效果。

    二级竖向tab

    在实现二级竖向tab时,开发者可以选择各种编程语言和技术框架,如Java、Kotlin(对于Android应用)、Swift或Objective-C(对于iOS应用),或者HTML、CSS和JavaScript(对于Web应用)。对于Android,可以使用Android...

    Qt竖向tab标签页面源码

    本资源提供的"Qt竖向tab标签页面源码"正好解决了这个问题。下面将详细解释如何实现竖向QTabWidget以及相关知识点。 1. **Qt库中的QTabWidget** QTabWidget是Qt库中的一个容器类,用于展示多个子窗口或者QWidget...

    竖向tab标签支持上下翻滚

    传统的Tab标签通常是横向排列,但随着移动设备和响应式设计的普及,竖向(纵向)Tab标签也开始受到关注,特别是对于屏幕空间有限的情况,竖向布局能更有效地利用垂直空间。本文将详细介绍如何实现“竖向tab标签支持...

    HTML+CSS竖向图文选项卡

    HTML和CSS是网页设计的基础,本教程将详细讲解如何利用这两种技术实现竖向图文选项卡。选项卡是一种常见的用户界面元素,它可以帮助用户在有限的空间内浏览和切换多个相关但独立的内容区域。在传统的水平选项卡中,...

    门户网站竖向TAB选项卡,定时自动切换

    标题中的“门户网站竖向TAB选项卡,定时自动切换”是一个常见的网页设计功能,它涉及到前端开发中的用户界面设计和交互效果。在这个场景中,我们主要讨论以下几个知识点: 1. **选项卡布局(Tab Layout)**:选项卡...

    仿某市市政网页竖向tab.zip

    焦作市政竖向tab" 的文件,这可能是一个HTML文件或一个包含了HTML和CSS代码的文件夹。以下将详细解析这个案例中的关键知识点: 1. **HTML5基础结构**:HTML5是网页开发的标准,提供了更强大的语义化元素。在这个...

    竖向tab标签滑动门选项卡

    综上所述,实现【竖向tab标签滑动门选项卡】涉及到前端开发的多个方面,包括HTML布局、CSS样式设计、JavaScript交互逻辑以及考虑用户体验和兼容性的优化。熟练掌握这些技术点,可以帮助开发者创建出既美观又实用的...

    门户网站的竖向TAB选项卡,带定时自动切换

    "门户网站的竖向TAB选项卡,带定时自动切换"是一个常见的设计模式,它优化了用户体验,使得用户可以方便地浏览和访问各类信息。这个设计尤其适用于内容丰富的网站,通过高效的空间利用和动态的交互方式,提高用户的...

    HTML-tab容器-竖直切换特效-源码

    同时,CSS还会定义tab标题和内容区域的布局,使其适应竖直方向的展示。 3. **JavaScript(JS)交互**:JavaScript用于实现用户交互,如点击事件监听和动态内容切换。当用户点击某个tab标题时,JS代码会识别这一动作...

    竖向折叠的CSS滑动菜单

    竖向折叠的CSS滑动菜单

    js简单实现竖向tab选项卡的方法

    实现竖向tab选项卡需要我们掌握HTML、CSS和JavaScript的基础知识。 首先,HTML部分是用来构建整个tab选项卡的结构框架。通过一个外部的容器(container)包裹tab标签列表(ul)和内容区域(div#tab_content)。在...

    网页选项卡,TAB竖向排列.rar

    在本资源“网页选项卡,TAB竖向排列.rar”中,重点展示了如何实现一种特殊的布局方式——将选项卡竖向排列,而非传统的横向布局。这种布局在某些场合下能提供更有效的空间利用和独特的视觉效果。 1. **选项卡的基本...

    纵向书签式Tab页

    2. **CSS样式**:通过CSS对Tab标题进行垂直布局,同时设置必要的样式,以确保整体视觉效果符合预期,例如字体、颜色、边框和背景等。 3. **jQuery交互**:利用jQuery选择器和事件监听器,当用户点击某个Tab标题时,...

    纯css带弧度的tab选项卡横版+竖版+箭头面包屑

    本文将深入探讨如何使用纯CSS来创建带弧度的Tab选项卡,包括横版和竖版两种布局方式,以及箭头面包屑导航的设计。通过掌握这些技巧,你可以为你的网站增添更多互动性和美观性。 首先,我们来看看横版Tab选项卡的...

    简洁的bootstrap垂直tab选项卡

    这款“简洁的Bootstrap垂直tab选项卡”旨在提供一种更直观、节省空间的用户界面,尤其适用于内容丰富的网页。在这个项目中,开发者通过对Bootstrap原生选项卡组件进行定制,实现了垂直布局,使得用户可以在页面的一...

    横向和树形tab tab菜单

    通过CSS,我们可以设定Tab的字体、颜色、边框、背景等样式,使其与网站或应用的整体设计保持一致。同时,还可以使用CSS3的新特性,如过渡(transition)、动画(animation)来增强交互体验。 5. **响应式设计**: ...

    很经典的CSS蓝色竖导航,方便实用。

    本资源是一个经典的CSS蓝色竖向导航栏的示例,适用于构建网页的导航结构,既实用又美观。下面将详细解释这个经典案例中的关键知识点。 1. **CSS布局**: - **Flexbox布局**:现代CSS中的Flexbox模型(弹性盒布局)...

    自己实现竖向QTabWidget QTabWidget美化 QTabWidget做参数设置

    在本篇文章中,我们将深入探讨如何自己实现竖向的QTabWidget,并对其进行美化,使其更适合用作参数设置界面,同时适应QDockWidget的布局需求。 首先,让我们了解QTabWidget的基本用法。QTabWidget由一系列的选项卡...

    JS实现淡蓝色简洁竖向Tab点击切换效果

    本实例介绍如何使用JavaScript(JS)来创建一个淡蓝色、简洁且竖向排列的Tab切换效果。这种效果不仅美观,而且功能实用,能够帮助用户更高效地浏览和导航页面内容。 首先,我们需要了解HTML结构。在这个示例中,Tab...

Global site tag (gtag.js) - Google Analytics