aref Links in einem neuen Fenster öffnen

Ich versuche, Webseite mit Menüs zu erstellen und jeder Menüpunkt ist separate HTML-Seite. Beim Klicken auf die Menüpunkte, die auf der separaten Seite geöffnet werden (das Menü wird ausgeblendet), die nicht möchten, da der Benutzer in der Lage ist, auf ein anderes Menü zu klicken, sollten sie sich auf derselben Seite öffnen, wobei der Menüpunkt immer angezeigt wird. Ich habe mehrere Dinge probiert, aber ich kann es nicht feststellen. Unten finden Sie die html:aref Links in einem neuen Fenster öffnen

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

Im Folgenden finden Sie 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; 
}

ich mit iframe aber Ausrichtung Änderungen auf unterschiedlichen Bildschirmgröße versucht, es sieht schrecklich *

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

Quelle

2017-03-12 Jigna Jain

Sie sollten AJAX verwenden – pol

@pol Ich bin neu in Ajax meine iframe unter und positionieren Sie es entsprechend Ihnen mehr Details kann mir hatte zu positionieren zu diesem Thema? –

Das grundlegende Prinzip ist, dass wenn der Benutzer auf einen Link klickt, er eine Anfrage an den Server sendet. Der Server verarbeitet sie und gibt einige Daten zurück, die nur einen bestimmten Bereich auf der Seite ändern können (abhängig davon, wie Sie es implementieren). Facebook verwendet Ajax BTW. – pol

Nicht sicher, wie vertraut Sie mit JQuery, aber das könnte hilfreich sein: Ich würde ein Skript schreiben, das den iframe src -Wert auf die entsprechende URL der Seite beim Klicken ändern würde. In Ihrem Fall wäre es etwa so aussehen:

script.js

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

Statt einem von Klassen auf die Links in Ihrem Menü zuweisen kann, und sie im Code setzen, anstatt „a“ . In Ihrem index.html

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

Es ist wichtig, dass Sie eine ID zu Ihrem iframe liefern sie aus dem Skript richtig anzurufen. Löschen Sie das Zielattribut von Ihren Menüverknüpfungen, da sie nicht mehr benötigt werden.

Quelle

2017-03-12 17:27:04 margarita

Ich weiß über Jquery und dachte darüber nach. Wie ich verwirrt bin, mit welcher jquery-Bibliothek und div-Element anstelle von aref verwendet werden muss? –

Die jquery, die ich verwendet habe, ist: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js – margarita

Was meinst du mit Aref? – margarita

Nach viel Überlegung und Treffer und Fehlschüsse Schließlich fand ich heraus, dass ich

Quelle

2017-03-16 11:54:25

aref Links in einem neuen Fenster öffnen

Antwort

Verwandte Themen