aref 链接在新窗口中打开答案

【问题标题】：aref links opening in new windowaref 链接在新窗口中打开
【发布时间】：2017-03-12 16:17:10
【问题描述】：

我正在尝试创建带有菜单的网页，每个菜单项都是单独的 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;
}

【问题讨论】：

你应该使用 AJAX
@pol 我是 ajax 新手，您能提供更多详细信息吗？
基本原理是当用户点击一个链接时，他向服务器发送一个请求。服务器对其进行处理并返回一些数据，这些数据只能更改页面上的特定区域（取决于您如何实现它）。 Facebook 使用 ajax 顺便说一句。

标签： javascript jquery html css iframe

【解决方案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，并将它们放在代码中而不是“a”。在你的 index.html

<div>
    <iframe src="anyurl.com" id="myiframe"></iframe> 
</div>

为 iframe 提供一个 ID 以便从脚本中正确调用它很重要。从您的菜单链接中删除目标属性，因为它们不再是必需的。

【讨论】：

我了解 jquery 并考虑了这一点。但是我对 jquery 库 amd 是否需要使用 div 元素而不是 aref 感到困惑？
我使用的jquery是：cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
你说的aref是什么意思？
请检查我的 jsFiddle 示例，它应该对您有所帮助！ jsfiddle.net/ed7vd3uc
我正在使用 aref 来引用应该在 iframe 中打开的附加页面

【解决方案2】：

经过深思熟虑和偶然发现，我最终发现我必须将 iframe 放置在下面并相应地定位它

【讨论】：