我正在尝试使用菜单创建网页,每个菜单项都是单独的html页面。当他们点击菜单项时,他们在单独的页面中打开(隐藏菜单),因为用户应该能够点击其他菜单,他们应该在同一页面中打开,同时显示菜单项。我尝试了几件事,但无法建立它。 下面是html:
<DOCTYPE html>
<html>
<head>
<title>gurukul_admin</title>
<link rel="stylesheet" href="gurukul_admin.css">
<link rel="stylesheet" href="iframe.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<iframe width = "1120" class = "iframe" height = "900" style="float:right" name="admission"></iframe>
</head>
<body>
<div class="left-menu">
<div class="logo"><i class="fa fa-align-justify"></i>
<div>Pure CSS Accordion Nav</div>
</div>
<div class="accordion">
<div class="section">
<input type="radio" name="accordion-1" id="section-1" checked="checked"/>
<label for="section-1"><span>Dashboard</span></label>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-2" value="toggle"/>
<label for="section-2"><span>Admissions</span></label>
<div class="content">
<ul>
<li><i class="fa fa-inbox"></i><span><a href="admission_dec.html" target="_self">Application Decision</a></span></li>
<li><i class="fa fa-share"></i><span><a href="admission_tte.html" target="_self">Enrol/Reject</a></span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-3" value="toggle"/>
<label for="section-3"> <span>Enrolment</span></label>
<div class="content">
<ul>
<li><i class="fa fa-cog"></i><span>Section Allocation</span></li>
<li><i class="fa fa-group"></i><span>Change Section</span></li>
<li><i class="fa fa-sitemap"></i><span>Exam Allocation</span></li>
<li><i class="fa fa-sitemap"></i><span><a href="feeallocation.html" target="_self">Fee Allocation</a></span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-4" value="toggle"/>
<label for="section-4"> <span>Administration</span></label>
<div class="content">
<ul>
<li><i class="fa fa-coffee"></i><span><a target="_self" href="acadmgmt.html" >Academic Year</a></span></li>
<li><i class="fa fa-coffee"></i><span><a href="classmgmt1.html" target="_self">Class Codes</a></span></li>
<li><i class="fa fa-coffee"></i><span><a href="sectmgmt.html" target="_self">Section Codes</a></span></li>
<li><i class="fa fa-coffee"></i><span><a href="submgmt.html" target="_self">Subject Codes</a></span></li>
<li><i class="fa fa-coffee"></i><span><a href="feemgmt.html" target="_self">Fee Category/Codes</a></span></li>
<li><i class="fa fa-coffee"></i><span><a href="assessmgmt.html" target="_self">Assessment Codes</a></span></li>
<li><i class="fa fa-coffee"></i><span><a href="usermgmt.html" target="_self">System Users</a></span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-5" value="toggle"/>
<label for="section-5"> <span>Staff Management</span></label>
<div class="content">
<ul>
<li><i class="fa fa-coffee"></i><span><a href="addstaff.html" target="_self">Add New Staff</a></span></li>
<li><i class="fa fa-coffee"></i><span><a href="viewstaff.html" target="_self">Class Codes</a></span></li>
</div>
</div>
</div>
</div>
</body>
</html>
以下是css
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
@import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css);
.accordion {
color: #FFF;
width: 100%;
}
.accordion .section {
width: 100%;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked + label {
background: #363636;
}
.accordion .section input[type='radio']:checked + label:before {
content: " ";
position: absolute;
border-left: 3px solid #21CCFC;
height: 100%;
left: 0;
}
.accordion .section input[type='radio']:checked ~ .content {
max-height: 300px;
opacity: 1;
z-index: 10;
overflow-y: auto;
}
.accordion .section label {
position: relative;
cursor: pointer;
padding: 10px 20px;
display: table;
background: #222;
width: 100%;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.accordion .section label:before {
content: " ";
width: 100%;
position: absolute;
left: 0;
top: 0;
height: 1px;
border-top: 1px solid #363636;
}
.accordion .section label:hover {
background: #363636;
}
.accordion .section label span {
display: table-cell;
vertical-align: middle;
}
.accordion .section:last-of-type {
border-bottom: 1px solid #363636;
}
.accordion .section .content {
max-height: 0;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
opacity: 0;
position: relative;
overflow-y: hidden;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #1ABC9C;
font-family: 'Quicksand', sans-serif;
}
.left-menu {
background: #222;
width: 210px;
position: absolute;
top: 0;
bottom: 0;
}
.accordion {
font-size: 14px;
}
.accordion .section .content {
padding: 0 15px;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked ~ .content {
padding: 15px;
}
ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
ul li {
padding: 10px;
}
ul li i {
font-size: 13px;
width: 15px;
margin-right: 15px;
}
ul li:hover {
cursor: pointer;
}
ul li:hover i {
color: #21CCFC;
}
.logo {
padding: 30px 10px;
width: 200px;
text-align: center;
color: #FFF;
font-size: 20px;
}
.logo i {
font-size: 70px;
color: #21CCFC;
}
iframe css
iframe {
margin-top: 0px;
margin-bottom: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 1px;
border-radius: 1px;
border: none;
background-color:#1ABC9C;
scrolling="no";
}
a:link, a:visited {
background-color: #363636;
color: white;
text-decoration: none;
}
a:hover, a:active {
background-color: #363636;
color: white;
text-decoration: none;
}
答案 0 :(得分:0)
不确定您对JQuery的熟悉程度,但这可能会有所帮助: 我会写一个脚本,它会在点击时将iframe src值更改为页面的相应url。 在你的情况下,它看起来像这样:
的script.js
$("a").click(function(event, target){
event.preventDefault();
console.log(event.target);
$("#myiframe").attr("src", $(event.target).attr("href"));
});
您可以将类分配给菜单中的链接,而不是将其放在代码中而不是“a”中。 在index.html中
<div>
<iframe src="anyurl.com" id="myiframe"></iframe>
</div>
为iframe提供ID以从脚本中正确调用它非常重要。 从菜单链接中删除目标属性,因为它们不再是必需的。
答案 1 :(得分:0)
经过大量的商议和点击和失误后,我终于发现我必须将我的iframe置于其下并相应地定位