aref鏈接在新窗口中打開

我想創建帶有菜單的網頁，每個菜單項都是單獨的html頁面。點擊他們在單獨頁面中打開的菜單項（隱藏菜單），因爲用戶應該能夠點擊其他菜單，他們應該在同一頁面中打開，菜單項一直顯示。我嘗試了幾件事，但無法建立它。下面是HTML：aref鏈接在新窗口中打開

<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，但排列的變化

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

來源

2017-03-12 Jigna Jain

你應該使用AJAX – pol

@pol我是新來的ajax你可以給我提供更多的細節在這？ –

基本原理是當用戶點擊一個鏈接時，他向服務器發送一個請求。服務器對其進行處理並返回一些數據，這些數據只能更改頁面上的特定區域（取決於您如何實現它）。 Facebook使用ajax btw。 – pol

不知道你對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>

您提供的ID到iframe從腳本正確地調用它是非常重要的。從您的菜單鏈接中刪除目標屬性，因爲它們不再是必需的。

來源

2017-03-12 17:27:04 margarita

我知道關於jQuery的想法。如何我很困惑，用jquery庫amd是否需要使用div元素來代替aref？ –

我使用的jquery是：https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js – margarita

你是什麼意思的aref？ – margarita

很多的醞釀和命中和未命中之後我終於發現，我不得不下放置我的iframe和它相應的位置

來源

2017-03-16 11:54:25

aref鏈接在新窗口中打開

回答

相關問題