css竖向tab

goby2008

浏览: 603512 次

最近访客更多访客>>

jAmEs_

k-ping

fygday

bill1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS jQuery JavaScript XHTML HTML

<!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>

分享到：

用jquery写一个简单的菜单伸缩效果 | css自动截取字符串

2010-07-19 15:59
浏览 1440
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css竖向tab

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css竖向tab

评论

发表评论

相关推荐

网站导航设计趋势案例集合

推荐12个漂亮的CSS3按钮实现方案

针对firefox ie6 ie7的css样式

JS无间隔滚动代码（三种效果）

点击按钮复制文本框内容

IE6下line-height 失效的解决办法

利用CSS省略长句

一些三角形的CSS写法

颜色让人感觉很舒服.

css自动截取字符串

前端开发 网站收藏

去掉焦点虚线

5个按钮的样式

纯CSS实现侧边栏/分栏高度自动相等

50 个Web 设计师必备的超便利工具

28组精心挑选的网页背景材质+Menu

10个轻量级CMS网站内容管理系统

10个优秀的 Web UI库/框架

2010网站欣赏

用CSS让文字居于DIV的底部

最近访客更多访客>>

前端开发网站收藏