制作选项卡式导航——在一个页面单击多个链接时,对应页面显示在本页面中的指定区域中
tabbedNavigation.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡式导航</title>
<link rel="stylesheet" href="tabbedNavigation.css" />
<script type="text/javascript" src="tabbedNavigation.js"></script>
</head>
<body>
<div id="container">
<div id="title">
<ul>
<li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li>
<li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li>
<li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li>
<li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li>
<li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li>
</ul>
</div>
<div id="content" class="content1">
<div id="content1">
<p>仿淘宝网站的导航效果。此方法有几个优点:</p>1、根据字数自适应项目长度-padding
</div>
<div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div>
<div id="content3" class="hidecontent">3、需要使用到js了</div>
<div id="content4" class="hidecontent">4、第四处</div>
<div id="content5" class="hidecontent">5、第五处</div>
</div>
</div>
</body>
CSS
- {
margin: 0;
padding: 0
}
body {
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
text-align: center;
height: auto;
width: auto;
background-color: #666666;
font-size: 12px;
color: #000000;
}
#container {
text-align: left;
width: 760px;
height: 400px;
background-color: #FFFFFF;
padding: 20px;
}
#container #title {
height: 28px;
}
#container #title ul {
background-color: pink;
height: 28px;
}
#container #title li {
background: skyblue;
float: left;
list-style-type: none;
height: 28px;
line-height: 28px;
text-align: center;
margin-right: 1px;
}
#container #title a {
text-decoration: none;
color: #000000;
display: block;
width: auto;
/* background: url(/texiao/tab_selected_left_bk2.gif) no-repeat left -29px; */
}
#container #title a span {
display: block;
/* background: url(/texiao/tab_selected_right_bk2.gif) no-repeat right -29px; */
padding: 0 15px;
}
#container #title #tag1 a:hover,
#container #title #tag2 a:hover,
#container #title #tag3 a:hover,
#container #title #tag4 a:hover,
#container #title #tag5 a:hover {
text-decoration: underline;
color: red;
/* background: url(/texiao/tab_selected_left_bk2.gif) no-repeat left -87px; */
}
#container #title #tag1 a:hover span,
#container #title #tag2 a:hover span,
#container #title #tag3 a:hover span,
#container #title #tag4 a:hover span,
#container #title #tag5 a:hover span {
display: block;
/* background: url(/texiao/tab_selected_right_bk2.gif) no-repeat right -87px; */
padding: 0 15px;
}
#container #title .selectli1,
#container #title .selectli2,
#container #title .selectli3,
#container #title .selectli4,
#container #title .selectli5 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(/texiao/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title a .selectspan1,
#container #title a .selectspan2,
#container #title a .selectspan3,
#container #title a .selectspan4,
#container #title a .selectspan5 {
display: block;
background: url(/texiao/tab_selected_right_bk2.gif) no-repeat right -87px;
padding: 0 15px 0 15px;
}
#container #content {
height: 300px;
padding: 10px;
}
.content1 {
border: 2px solid #3A81C8;
background-color: #DFEBF7;
}
.content2 {
border: 2px solid #ff950b;
background-color: #FFECD2;
}
.content3 {
border: 2px solid #FE74B8;
background-color: #FFECF5;
}
.content4 {
border: 2px solid #00988B;
background-color: #E8FFFD;
}
.content5 {
border: 2px solid #A8BC1F;
background-color: #F7FAE2;
}
.hidecontent {
display: none;
}
JS
function switchTag(tag, content) {
// alert(tag);
// alert(content);
for (var i = 1; i < 6; i++) {
if (“tag” + i == tag) {
document.getElementById(tag).getElementsByTagName(“a”)[0].className = “selectli” + i;
document.getElementById(tag).getElementsByTagName(“a”)[0].getElementsByTagName(“span”)[0].className = “selectspan” +
i;
} else {
document.getElementById(“tag” + i).getElementsByTagName(“a”)[0].className = “”;
document.getElementById(“tag” + i).getElementsByTagName(“a”)[0].getElementsByTagName(“span”)[0].className = “”;
}
if (“content” + i == content) {
document.getElementById(content).className = “”;
} else {
document.getElementById(“content” + i).className = “hidecontent”;
}
document.getElementById(“content”).className = content;
}
}