css竖向tab

最新推荐文章于 2023-04-28 09:54:59 发布

goby2008

最新推荐文章于 2023-04-28 09:54:59 发布

阅读量216

点赞数

分类专栏： css 文章标签： CSS jQuery JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/goby2008/article/details/83671726

版权

css 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

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