Question

我正在尝试使用菜单创建网页，每个菜单项都是单独的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但是在不同的屏幕尺寸上对齐更改看起来很糟糕*

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;
}

Answer 1

不确定您对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以从脚本中正确调用它非常重要。从菜单链接中删除目标属性，因为它们不再是必需的。

Answer 2

经过大量的商议和点击和失误后，我终于发现我必须将我的iframe置于其下并相应地定位

aref链接在新窗口中打开

2 个答案: