<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="index3.css" type="text/css"></link>
<script language="javascript">
<!--
function Change(val){
if(val=="div1"){
window.alert("ok");
document.getElementById('div1').style.display='block';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
document.getElementById('div4').style.display='none';
}else if(val=="div2"){
window.alert("ok2");
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='block';
document.getElementById('div3').style.display='none';
document.getElementById('div4').style.display='none';
}else if(val=="div3"){
window.alert("ok3");
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='block';
document.getElementById('div4').style.display='none';
}else if(val=="div4"){
window.alert("ok4");
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
document.getElementById('div4').style.display='block';
}
}
-->
</script>
</head>
<body>
<div class="top">
<div class="kehu"></div>
<div class="zhuti">sd</div>
<div class="anniu">
<ul>
<li onclick="Change('div1')"><a href="#"><img src="images/1.jpg" style="margin-left:5px" /></a></li>
<li onclick="Change('div2')"><a href="#"><img src="images/2.jpg" style="margin-left: 70px;margin-top: -60px;position: absolute;"/></a></li>
<li onclick="Change('div3')"><a href="#"><img src="images/3.jpg" style="margin-left:150px;margin-top: -60px;position:absolute;" /></a></li>
<li onclick="Change('div4')"><a href="#"><img src="images/4.jpg" style="margin-left:230px;margin-top: -60px;position:absolute;" /></a></li>
</ul>
</div>
<div class="div1" id="div1"></div>
<div class="div2" id="div1"></div>
<div class="div3" id="div1"></div>
<div class="div4" id="div1"></div>
</div>
</body>
</html>body{
width:1250px;
margin:0 auto;
border: 1px solid red;
font:12px;
}.top{
width:1245px;
height:100px;
border: 1px solid red;
}.kehu{
margin-left:80px;
width:250px;
background-color: gray;
height:100px;
float: left;
}.zhuti{
margin-left:40px;
width:250px;
background-color: blue;
height:100px;
float: left;
}.anniu{
margin-left:40px;
width:500px;
background-color: lime;
height:100px;
float: left;
}
.anniu ul{
list-style-type: none;
padding: 0px;
}/*.anniu ul li{
position: absolute;
}*/
.div1{
margin-left:50px;
margin-top:150px;
height: 500px;
width: 800px;
border: 2px solid blue;
background-image: url("images/d1.jpg");
}.div2{
margin-left:50px;
margin-top:150px;
height: 500px;
width: 800px;
border: 2px solid blue;
background-image: url("images/d2.jpg");
display: none;
}.div3{
margin-left:50px;
margin-top:150px;
height: 500px;
width: 800px;
border: 2px solid blue;
background-image: url("images/d3.jpg");
display: none;
}.div4{
margin-left:50px;
margin-top:150px;
height: 500px;
width: 800px;
border: 2px solid blue;
background-image: url("images/d4.jpg");
display: none;
}
当我点击上面的几个按钮的时候想要让div1、div2、div3和div4在指定的位置上面跳转 只有第一个按钮可以,老是报错说缺少对象
<html>
<head>
<title>index3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="index3.css" type="text/css"></link>
<script language="javascript">
<!--
function Change(val){
if(val=="div1"){
window.alert("ok");
document.getElementById('div1').style.display='block';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
document.getElementById('div4').style.display='none';
}else if(val=="div2"){
window.alert("ok2");
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='block';
document.getElementById('div3').style.display='none';
document.getElementById('div4').style.display='none';
}else if(val=="div3"){
window.alert("ok3");
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='block';
document.getElementById('div4').style.display='none';
}else if(val=="div4"){
window.alert("ok4");
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
document.getElementById('div4').style.display='block';
}
}
-->
</script>
</head>
<body>
<div class="top">
<div class="kehu"></div>
<div class="zhuti">sd</div>
<div class="anniu">
<ul>
<li onclick="Change('div1')"><a href="#"><img src="images/1.jpg" style="margin-left:5px" /></a></li>
<li onclick="Change('div2')"><a href="#"><img src="images/2.jpg" style="margin-left: 70px;margin-top: -60px;position: absolute;"/></a></li>
<li onclick="Change('div3')"><a href="#"><img src="images/3.jpg" style="margin-left:150px;margin-top: -60px;position:absolute;" /></a></li>
<li onclick="Change('div4')"><a href="#"><img src="images/4.jpg" style="margin-left:230px;margin-top: -60px;position:absolute;" /></a></li>
</ul>
</div>
<div class="div1" id="div1"></div>
<div class="div2" id="div1"></div>
<div class="div3" id="div1"></div>
<div class="div4" id="div1"></div>
</div>
</body>
</html>body{
width:1250px;
margin:0 auto;
border: 1px solid red;
font:12px;
}.top{
width:1245px;
height:100px;
border: 1px solid red;
}.kehu{
margin-left:80px;
width:250px;
background-color: gray;
height:100px;
float: left;
}.zhuti{
margin-left:40px;
width:250px;
background-color: blue;
height:100px;
float: left;
}.anniu{
margin-left:40px;
width:500px;
background-color: lime;
height:100px;
float: left;
}
.anniu ul{
list-style-type: none;
padding: 0px;
}/*.anniu ul li{
position: absolute;
}*/
.div1{
margin-left:50px;
margin-top:150px;
height: 500px;
width: 800px;
border: 2px solid blue;
background-image: url("images/d1.jpg");
}.div2{
margin-left:50px;
margin-top:150px;
height: 500px;
width: 800px;
border: 2px solid blue;
background-image: url("images/d2.jpg");
display: none;
}.div3{
margin-left:50px;
margin-top:150px;
height: 500px;
width: 800px;
border: 2px solid blue;
background-image: url("images/d3.jpg");
display: none;
}.div4{
margin-left:50px;
margin-top:150px;
height: 500px;
width: 800px;
border: 2px solid blue;
background-image: url("images/d4.jpg");
display: none;
}
当我点击上面的几个按钮的时候想要让div1、div2、div3和div4在指定的位置上面跳转 只有第一个按钮可以,老是报错说缺少对象
</div>
<div class="div1" id="div1"></div>
<div class="div2" id="div1"></div>
<div class="div3" id="div1"></div>
<div class="div4" id="div1"></div>
</div>
这个class 估计你和id 混绕了,id怎么都是div1
<div class="div1" id="div1"></div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<div class="div4" id="div4"></div>
<div class="div2" id="div1"></div>
<div class="div3" id="div1"></div>
<div class="div4" id="div1"></div>改成
<div class="div1" id="div1"></div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<div class="div4" id="div4"></div>
就可以了,后面的id是根据上面的复制下来忘记改了,新书就是苦B