刚开始学js，网页需要一个功能，就是点击li中的a链接，将隐藏的div显示出来。现在页面是这样的
想要的效果是，点击某个li中的a链接，显示相应的div。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<!-- <script src="../js/jquery.min.js" type="text/javascript"></script> -->
<style>
.dingwei li {
position: relative;
border: 1px solid red;
}
.window_css {
border: 1px solid blue;
display: none;
position: absolute;
bottom: 0%;
/* left: 25%; */
width: 250px;
height: 60%;
background-color: aliceblue;
z-index: 11;
}
</style>
</head>
<body>
<ul>
<li>
<div id="window" class="window_css" >
<form action="javascript:fuwu();" method="POST">
<input type="text" name="shijian" placeholder="预约的天数" class="riqi" id="shijian">
<button>提交</button>
</form>
<!-- <a href="javascript:void(0)" onclick="hideWindow()"> -->
<a href="javascript:void(0)" onclick="hideWindow()">
x
</a>
</div>
<a href="javascript:displayWindow();" style="text-align: center;margin:15px 0;display:block" id="yuding">预订</a>
</li>
<li>
<div id="window" class="window_css" >
<form action="javascript:fuwu(<?php echo $info['id']; ?>,'<?php echo $info['fuwuming']; ?>');" method="POST">
<input type="text" name="shijian" placeholder="预约的天数" class="riqi" id="shijian">
<button>提交</button>
</form>
<!-- <a href="javascript:void(0)" onclick="hideWindow()"> -->
<a href="javascript:void(0)" onclick="hideWindow()">
x
</a>
</div>
<a href="javascript:displayWindow();" style="text-align: center;margin:15px 0;display:block" id="yuding">预订</a>
</li>
<li>
<div id="window" class="window_css" >
<form action="javascript:fuwu(<?php echo $info['id']; ?>,'<?php echo $info['fuwuming']; ?>');" method="POST">
<input type="text" name="shijian" placeholder="预约的天数" class="riqi" id="shijian">
<button>提交</button>
</form>
<!-- <a href="javascript:void(0)" onclick="hideWindow()"> -->
<a href="javascript:void(0)" onclick="hideWindow()">
x
</a>
</div>
<a href="javascript:displayWindow();" style="text-align: center;margin:15px 0;display:block" id="yuding">预订</a>
</li>
<li>
<div id="window" class="window_css" >
<form action="javascript:fuwu(<?php echo $info['id']; ?>,'<?php echo $info['fuwuming']; ?>');" method="POST">
<input type="text" name="shijian" placeholder="预约的天数" class="riqi" id="shijian">
<button>提交</button>
</form>
<!-- <a href="javascript:void(0)" onclick="hideWindow()"> -->
<a href="javascript:void(0)" onclick="hideWindow()">
x
</a>
</div>
<a href="javascript:displayWindow();" style="text-align: center;margin:15px 0;display:block" id="yuding">预订</a>
</li>
</ul>
<script>
function displayWindow(id,fuwuming) {
/*悬浮窗口的显示,需要将display变成block*/
document.getElementById("window").style.display = "block";
}
/*当点击调用此方法,将悬浮窗口和背景全部隐藏*/
function hideWindow() {
document.getElementById("window").style.display = "none";
}
</script>
</body>
</html>
现在只实现了点击按钮可以显示第一个的div，没有办法在剩下li中的相应位置显示div
