这张图片不知道怎么传上来就这样了 它的样子 应该是上面图片的左边的对称样式。
将这俩张图片放到images目录下面。
hiddenlist.html和images目录同一级,代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>六兄弟</title>
<style type="text/css">
<!--
#container {
text-align: center;
width: auto;
height:auto;
background:transparent;
padding: 0px;
}
* {
margin: 0; padding:0
}
#container #title {
margin-top:50px;
height: 20px;
}
#container #title li {
float: left;
list-style-type: none;
height: 20px;
line-height: 20px;
text-align: center;
margin-right: 1px;
}
#container #title ul {
background:transparent;
height: 20px;
}
#container #title a {
text-decoration: none;
color: #000000;
display: block;
width: auto;
background: url(images/tab_selected_left_bk2.gif) no-repeat left -29px;
}
#container #title a span{
display: block;
background: url(images/tab_selected_right_bk2.gif) no-repeat right -29px;
padding: 0 15px 0 15px;
}
#container #title #tag a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(images/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title #tag a:hover span{
display: block;
background: url(images/tab_selected_right_bk2.gif) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #title .selectli {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(images/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan {
display: block;
background: url(images/tab_selected_right_bk2.gif) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #title,#content {
width:570px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
margin:0px;
padding: 0px;
}
.content {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #bbd2e8;
border-right-color: #bbd2e8;
border-bottom-color: #bbd2e8;
border-left-color: #bbd2e8;
background:transparent;
}
.content1 {
display:block;
}
.hidecontent {display:none;}
p {
font-color:green;
text-align:left;
}
.top {
position:absolute;
top:2000px;
}
-->
</style>
<script type="text/javascript">
window.οnlοad= function(){
document.getElementById("tag1").getElementsByTagName("a")[0].className="selectli";
document.getElementById("tag1").getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan";
document.getElementById("content1").className ="content1";
document.getElementById("content2").className ="hidecontent";
document.getElementById("content3").className ="hidecontent";
document.getElementById("content4").className ="hidecontent";
document.getElementById("content5").className ="hidecontent";
document.getElementById("content6").className ="hidecontent";
}
function switchTag(tag,content){
for(i=1; i <7; i++)
{
if ("tag"+i==tag)
{
document.getElementById(tag).getElementsByTagName("a")[0].className="selectli";
document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan";
}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";
}
}
</script>
</head>
<body>
<div id="container">
<div id="title">
<ul>
<li id="tag1"><a href="javascript:void(0);" οnclick="switchTag('tag1','content1');this.blur();" ><span>熊老大</span></a></li>
<li id="tag2"><a href="javascript:void(0);" οnclick="switchTag('tag2','content2');this.blur();" ><span>熊老二</span></a></li>
<li id="tag3"><a href="javascript:void(0);" οnclick="switchTag('tag3','content3');this.blur();" ><span>熊老三</span></a></li>
<li id="tag4"><a href="javascript:void(0);" οnclick="switchTag('tag4','content4');this.blur();" ><span>熊老四</span></a></li>
<li id="tag5"><a href="javascript:void(0);" οnclick="switchTag('tag5','content5');this.blur();" ><span>熊老五</span></a></li>
<li id="tag6"><a href="javascript:void(0);" οnclick="switchTag('tag6','content6');this.blur();" ><span>熊老六</span></a></li>
</ul>
</div>
<div id="content" class="content">
<div id="content1" class="content1">
<p>我是老大!
<br> 请点击“熊老二”,你将看看到我的二弟</p>
</div>
<div id="content2">
<p>我是老二!
<br> 请点击“熊老三”,你将看看到我的三弟</p>
</div>
<div id="content3">
<p>我是老三!
<br> 请点击“熊老四”,你将看看到我的四弟</p>
</div>
<div id="content4">
<p>我是老四!
<br> 请点击“熊老五”,你将看看到我的五妹</p>
</div>
<div id="content5">
<p>我是老⑤!
<br> 请点击“熊老六”,你将看看到我的⑥弟</p>
</div>
<div id="content6">
<p>我是老六!
<br> 我最小,是家里最受宠的呦!</p>
</div>
</div>
</div>
</body>
</html>
有兴趣的可以学习一下。
以下是熊同学在此基础上用Jquery修改的代码,功能基本一致,代码很简单,很简洁,有兴趣的请对照看代码学习(有部分CSS代码多余)。
<html>
<head>
<title>new</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var temp = "";
temp = $(".content:first").html();
$("#content_").append(temp);
$(".content").children().hide();
$(".tag").hover(function(){
$(this).children("a").addClass("selectli").children("span").addClass("selectspan");
temp = $(this).children(".content").html();
$("#content_").html(temp).children("p").css("display","block");
},function(){
$(this).children("a").removeClass("selectli").children("span").removeClass("selectspan");
});
})
</script>
<style>
#container {
text-align: center;
width: auto;
height:auto;
background:transparent;
padding: 0px;
}
* {
margin: 0; padding:0
}
#container #title {
margin-top:50px;
height: 20px;
}
#container #title li {
float: left;
list-style-type: none;
height: 20px;
line-height: 20px;
text-align: center;
margin-right: 1px;
}
#container #title ul {
background:transparent;
height: 20px;
}
#container #title a {
text-decoration: none;
color: #000000;
display: block;
width: auto;
background: url(images/tab_selected_left_bk2.gif) no-repeat left -29px;
}
#container #title a span{
display: block;
background: url(images/tab_selected_right_bk2.gif) no-repeat right -29px;
padding: 0 15px 0 15px;
}
#container #title #tag a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(images/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title #tag a:hover span{
display: block;
background: url(images/tab_selected_right_bk2.gif) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #title .selectli {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(images/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan {
display: block;
background: url(images/tab_selected_right_bk2.gif) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #title,._content {
width:570px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
margin:0px;
padding: 0px;
}
._content {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #bbd2e8;
border-right-color: #bbd2e8;
border-bottom-color: #bbd2e8;
border-left-color: #bbd2e8;
background:transparent;
}
.content1 {
display:block;
}
.hidecontent {display:none;}
p {
font-color:green;
text-align:left;
}
</style>
</head>
<body>
<div id="container">
<div id="title">
<ul>
<li class="tag"><a href="#" ><span>熊老大</span></a>
<div class="content">
<p>我是老大!
<br> 请点击“熊老二”,你将看看到我的二弟</p>
</div>
</li>
<li class="tag"><a href="#" ><span>熊老二</span></a>
<div class="content">
<p>我是老二!
<br> 请点击“熊老三”,你将看看到我的三弟</p>
</div>
</li>
<li class="tag"><a href="#" ><span>熊老三</span></a>
<div class="content">
<p>我是老三!
<br> 请点击“熊老四”,你将看看到我的四弟</p>
</div>
</li>
<li class="tag"><a href="#" ><span>熊老四</span></a>
<div class="content">
<p>我是老四!
<br> 请点击“熊老五”,你将看看到我的五妹</p>
</div>
</li>
<li class="tag"><a href="#" ><span>熊老五</span></a>
<div class="content">
<p>我是老⑤!
<br> 请点击“熊老六”,你将看看到我的⑥弟</p>
</div>
</li>
<li class="tag"><a href="#" ><span>熊老六</span></a>
<div class="content">
<p>我是老六!
<br> 我最小,是家里最受宠的呦!</p>
</div>
</li>
</ul>
</div>
<div id="content_" class="_content">
</div>
</div>
</body>
</html>