堆栈内存溢出
  简体   繁体   English

aref链接在新窗口中打开

[英]aref links opening in new window

 原文  2017-03-12 16:17:10  5   2    javascript/ jquery/ html/ css/ iframe

问题描述

I am trying to create webpage with menus and each menu item is separate html page. 我正在尝试使用菜单创建网页，每个菜单项都是单独的html页面。 While clicking the menu items they open up in the separate page(hiding the menu) which don't want as the user should be able to click on other menu they should open up in same page with menu item being displayed all time. 当单击菜单项时，它们在单独的页面中打开（隐藏菜单），因为用户应该能够单击其他菜单，所以它们应该在同一页面中打开，并且菜单项始终显示。 I tried several thing but cant establish it. 我尝试了几件事，但无法建立它。 Below is the 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>

Below is css 下面是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;
}
  • I tried with iframe but alignment changes on different screen size it looks horrible * 我尝试使用iframe但是在不同的屏幕尺寸上对齐更改它看起来很糟糕*

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

2 个解决方案

解决方案1
 0  2017-03-12 17:27:04

Not sure how familiar you with JQuery, but this might be helpful: I would write a script, that would change the iframe src value to the corresponding url of the page on click. 不确定你对JQuery有多熟悉，但这可能会有所帮助：我会编写一个脚本，它会在点击时将iframe src值更改为页面的相应url。 In your case it would look something like this: 在你的情况下，它看起来像这样：

script.js 的script.js 

$("a").click(function(event, target){
  event.preventDefault();
  console.log(event.target);
  $("#myiframe").attr("src", $(event.target).attr("href"));
});

Instead of a you can assign classes to the links in your menu, and put them in the code instead of "a". 您可以将类分配给菜单中的链接，而不是将其放在代码中而不是“a”中。 In your index.html 在你的index.html中 

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

It is important that you provide an id to your iframe to call it properly from the script. 为iframe提供一个id以从脚本中正确调用它是很重要的。 Delete target attribute from your menu links, as they are not necessary anymore. 从菜单链接中删除目标属性，因为它们不再是必需的。

解决方案2
 0  2017-03-16 11:54:25

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 window.location 在新标签页中打开链接 - window.location opening links in a new tab 在新窗口中打开的colorbox iframe中的链接 - Links in colorbox iframe opening in new window 在新的 window 中使用 class 弹出窗口打开所有链接 - Opening all links with class popup in a new window 防止在新的 window 中打开链接（保持最新状态） - Prevent opening links in a new window (stay in current) 如何防止iframe中的链接在新窗口中打开？ - How can I prevent links in iframes from opening in new window? 默认情况下，我的Web应用程序中的链接会在新标签页/窗口中打开 - Links are opening in a new tab/window by default from my web application 自动化系统，用于在新窗口/选项卡中打开其他网站链接 - Automated system for opening other website links in new window/tab HTML在同一新窗口中打开页面上的多个链接 - Html opening multiple links on the page in a same new window 摆脱蓝色边框并在Javascript中的新窗口中打开链接 - Getting rid of blue border and opening links in new window in Javascript AngularJS - 使用ng-click在新窗口中打开链接 - AngularJS - Opening links in a new window using ng-click
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM