不同触发链接在同一区域显示功能
来源：互联网 发布：苏州爱知科技招聘 编辑：程序博客网 时间：2024/05/16 05:15
这张图片不知道怎么传上来就这样了 它的样子 应该是上面图片的左边的对称样式。
将这俩张图片放到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.onload= 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);" onclick="switchTag('tag1','content1');this.blur();" ><span>熊老大</span></a></li>
<li id="tag2"><a href="javascript:void(0);" onclick="switchTag('tag2','content2');this.blur();" ><span>熊老二</span></a></li>
<li id="tag3"><a href="javascript:void(0);" onclick="switchTag('tag3','content3');this.blur();" ><span>熊老三</span></a></li>
<li id="tag4"><a href="javascript:void(0);" onclick="switchTag('tag4','content4');this.blur();" ><span>熊老四</span></a></li>
<li id="tag5"><a href="javascript:void(0);" onclick="switchTag('tag5','content5');this.blur();" ><span>熊老五</span></a></li>
<li id="tag6"><a href="javascript:void(0);" onclick="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>
- 不同触发链接在同一区域显示功能
- MFC 关于在对话框上的同一区域显示不同的内容（子对话框）
- 同一按钮按钮不同功能
- ios应用在不同语言及区域的日期显示
- ios应用在不同语言及区域的日期显示
- 同一字符串显示不同风格
- 同一jsp页面实现点击左边不同链接右边显示详情信息，解决局部刷新
- 多个fragment在同一块区域的显示与隐藏
- Android 一个按钮两次单击触发两个不同事件并实现两个View在同一界面切换
- 如何完成在一个图片中，点击不同区域显示不同的结果
- 同一账号同一时间在不同地点登陆实现登陆剔出功能
- 同一功能不同表示语句执行时间比较
- 【学习】css之链接在不同状态下显示不同颜色
- 使用 iframe 实现在同一页面中显示不同的内容
- OSG在同一视图中显示来自不同来源的多个模型节点文件
- Android开发：同一ImageView显示不同图片
- Android开发：同一ImageView显示不同图片
- 同一TextView上内容的不同显示
- 路由过滤命令详解
- 实现图片按照比例显示（java代码）
- 做网站的实质是做平台做服务
- 添加多个邮件附件页面。只有视图层。
- Jobs斯坦福大学演讲(一）
- 不同触发链接在同一区域显示功能
- 如何在oracle使用blob,clob
- struts hibernate spring在MyEclipse中的整合设置步骤
- Struts2与Struts1的对比
- 今天在这里'落户'啦....
- session总结
- API之子窗口创建
- 《java学习笔记》读书笔记の小心使用Boxing
- 我也谈谈方法之编程
