老师限定只能用CSS+div的方法，不能用JavaScript和frameset的方法
同一个页面有四个板块，上、下、中间有左右，请问如何用div+CSS的方法制作点击左边的板块在右边显示呢这是我body里的代码<body><divclass="contai...
同一个页面有四个板块，上、下、中间有左右，请问如何用div+CSS的方法制作点击左边的板块在右边显示呢
这是我body里的代码<body>
<div class="container">
<div class="top">
<h3>
<span> </span>
<span>首页</span>
<span>|</span>
<span><a href=" " style="color: blue" hidden>个人主页</a ></span>
<span>|</span>
<spam><a href="../作业二/自荐信.html" style="color: blue">自荐信</a ></spam>
<span>|</span>
<span>成绩单</span>
</h3>
< img src="图片/top图.png" alt="加载失败">
</div>
<div class="pagebody">
<div id="right" ></div>
<div class="left">
<br>
<ul>
<li>首页</li>
<li><a href="../作业一/个人主页.html" style="color:#D2691E" >个人主页</a ></li>
<li><a href="../作业二/自荐信.html "style="color: #D2691E">自荐信</a ></li>
<li>成绩单</li>
</ul>
</div>
</div>
<div class 展开
这是我body里的代码<body>
<div class="container">
<div class="top">
<h3>
<span> </span>
<span>首页</span>
<span>|</span>
<span><a href=" " style="color: blue" hidden>个人主页</a ></span>
<span>|</span>
<spam><a href="../作业二/自荐信.html" style="color: blue">自荐信</a ></spam>
<span>|</span>
<span>成绩单</span>
</h3>
< img src="图片/top图.png" alt="加载失败">
</div>
<div class="pagebody">
<div id="right" ></div>
<div class="left">
<br>
<ul>
<li>首页</li>
<li><a href="../作业一/个人主页.html" style="color:#D2691E" >个人主页</a ></li>
<li><a href="../作业二/自荐信.html "style="color: #D2691E">自荐信</a ></li>
<li>成绩单</li>
</ul>
</div>
</div>
<div class 展开
11个回答
展开全部
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
<style>
* {
margin: 0;
padding: 0;
}
.top,
.bottom {
height: 100px;
font-size: 30px;
background-color: aqua;
text-align: center;
line-height: 100px;
}
.middle {
height: 500px;
}
.left,
.right {
float: left;
height: 100%;
}
.left {
position: relative;
width: 30%;
background-color: rgb(255, 30, 0);
}
.right {
width: 70%;
background-color: rgb(0, 255, 64);
}
.left p {
height: 50px;
color: #fff;
background: pink;
margin: 10px 0;
text-align: center;
line-height: 50px;
}
.one-page,
.two-page {
position: absolute;
top: 0;
left: 100%;
width: 200%;
height: 100%;
background-color: #fff;
display: none;
}
.one-box:active .one-page {
display: block;
}
.two-box:active .two-page {
display: block;
}
</style>
</head>
<body>
<div class="top">上</div>
<div class="middle">
<div class="left">
<div class="one-box">
<p class="one">第一页</p>
<div class="one-page">1111111111111111111</div>
</div>
<div class="two-box">
<p class="two">第二页</p>
<div class="two-page">222222222222222222</div>
</div>
</div>
<div class="right"></div>
</div>
<div class="bottom">下</div>
<script src="" async defer></script>
</body>
</html>
直接拿走,完成实现你的功能,利用active添加样式,当然用a标签锚点也能实现
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2019-03-25 · 知道合伙人软件行家
yfcp
知道合伙人软件行家
采纳数：1748
获赞数：5545
有多年网站建设相关工作经验。熟悉ASP、ASP.net、VB、JavaScript、HTML等语言和CSS、Ajax等相关技术。
向TA提问 私信TA
关注
![]()
展开全部
1、不用frameset，可以用iframe。
2、如果iframe也不能用，同时一点js代码都不用，目前我没想到解决办法。
2、如果iframe也不能用，同时一点js代码都不用，目前我没想到解决办法。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不能用js...这不是没事找事嘛，何必呢
非要不用js的话...
左侧，用一下:hover或者:active来强行感应点击或者鼠标悬浮吧，
然后右边也要嵌套进左边的标签里，作为子级，然后用绝对定位移动到右边的位置
非要不用js的话...
左侧，用一下:hover或者:active来强行感应点击或者鼠标悬浮吧，
然后右边也要嵌套进左边的标签里，作为子级，然后用绝对定位移动到右边的位置
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
老师限定只能用css加div的方法，那就不能用javascriot和frameset的方法，老师说的没错哦，有意见你可以告诉我。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
先回答问题，答案是可以实现
第一种使用a标签配合锚点
第二种使用input radio配合css选择器（网页链接），这个是之前做的demo可以参考
但是并不推荐使用这种方法，能用js就用js，学好js对你以后的发展会更好
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（9）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
