Javascript aref链接在新窗口中打开_Javascript_Jquery_Html_Css_Iframe

Javascript aref链接在新窗口中打开

javascript jquery html css iframe

Javascript aref链接在新窗口中打开,javascript,jquery,html,css,iframe,Javascript,Jquery,Html,Css,Iframe,我正在尝试创建带有菜单的网页，每个菜单项都是单独的html页面。当单击菜单项时，它们会在单独的页面中打开（隐藏菜单），用户不希望这样做，因为用户应该能够单击其他菜单，它们会在同一页面中打开，菜单项始终显示。我试过几件事，但都不能确定。以下是html： <DOCTYPE html> <html> <head> <title>gurukul_admin</title> <link rel="styleshee

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

我尝试了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;
}

不确定您对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，以便从脚本中正确调用它，这一点很重要。

从菜单链接中删除目标属性，因为它们不再是必需的。

不确定您对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，以便从脚本中正确调用它，这一点很重要。

从菜单链接中删除目标属性，因为它们不再是必要的。

经过大量的考虑和点击和错过，我最终发现我必须将我的iframe放在下面，并相应地进行定位

您应该使用AJAX@pol 我是ajax新手，你能提供更多细节给我吗？基本原理是，当用户单击链接时，他会向服务器发送请求。服务器处理它并返回一些数据，这些数据只能更改页面上的特定区域（取决于您如何实现它）。Facebook使用ajax顺便说一句，你应该使用AJAX@pol我是ajax新手，你能提供更多细节给我吗？基本原理是，当用户单击链接时，他会向服务器发送请求。服务器处理它并返回一些数据，这些数据只能更改页面上的特定区域（取决于您如何实现它）。顺便说一句，Facebook使用ajax。我知道jquery并考虑过这一点。不管我怎么搞不清楚，究竟哪些jquery库amd需要使用div元素来代替aref？我使用的jquery是：aref是什么意思？请检查我的JSFIDLE示例，它应该会对您有所帮助！我正在使用aref引用应该在iFrame中打开的其他页面，我了解jquery并考虑过这一点。不管我怎么搞不清楚，究竟哪些jquery库amd需要使用div元素来代替aref？我使用的jquery是：aref是什么意思？请检查我的JSFIDLE示例，它应该会对您有所帮助！我使用aref来引用应该在iframe中打开的附加页面