该博客为转载内容，原文链接为https://www.cnblogs.com/wcg249165510/archive/2009/01/05/1368871.html ，涉及JavaScript和XHTML相关知识。
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Eric Meyer's tabbed navbar Preview</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
/* CSS Tabs */
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 10px;
margin-left: 1px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a.current {
background: white;
border-bottom: 1px solid white;
}
#tabContent .divContent{
width:400px;
height:300px;
border:1px solid blue;
}
#tabContent{
margin-top:-14px;}
-->
</style>
<script type="text/javascript" src="../jquery-1.2.5.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#navcontainer ul li a").mouseover(function(){
//全隐藏
$("#tabContent div").hide();
$("#navlist li a").removeClass("current");
$(this).addClass("current");
//获得目标div的id
var tar= $(this).attr("tabTarget") ;
$("#tabContent #"+tar).show();
});
//初始除第１个外全部隐藏
$("#tabContent div:gt(0)").hide();
$("#tabContent div").addClass("divContent");
});
</script>
</head>
<body>
<h4>Eric Meyer's tabbed navbar</h4>
<div id="tab" style="width:400px;">
<div id="navcontainer" style="margin-top:5px;" >
<ul id="navlist">
<li><a tabTarget="_t1" href="#" class="current" >Home</a></li>
<li><a tabTarget="_t2" href="#">Products</a></li>
<li><a tabTarget="_t3" href="#">Services</a></li>
</ul>
</div>
<div id="tabContent">
<div id="_t1" >111111111asdhjksdfasdjf</div>
<div id="_t2">2222222222sdfasdfasd</div>
<div id="_t3">
<p>33333333333333</p>
<p>sdfjsaidjflkasjdf</p>
<p>skldfjlaksdjflkajsdlf</p>
</div>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
