arefリンクが新しいウィンドウで開きます

メニュー付きのWebページを作成しようとしていますが、各メニュー項目は別々の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、私はそれは恐ろしい*

のiframe CSS

に見えるさまざまな画面サイズではiframeが、アライメントの変化を試してみました

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

：以下はhtmlです

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を使用する必要がありますそれに応じて位置をことが判明しますこれ？ –

基本的なプリンシパルは、ユーザーがリンクをクリックすると、サーバーに要求を送信することです。サーバーはそれを処理して、ページ上の特定の領域のみを変更できるいくつかのデータを返します（実装方法によって異なります）。 Facebookはajax btwを使用しています。 – pol

JQueryの使い慣れていないことがわかりましたが、参考になると思います。 iframe srcの値をクリック時のページの対応するURLに変更するスクリプトを作成しました。あなたは、メニュー内のリンクにクラスを割り当て、コードの代わりに「A」でそれらを置くことができ

script.js

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

の代わりに：あなたのケースでは、このようになります。あなたのindex.htmlで

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

あなたがスクリプトから適切にそれを呼び出すためにあなたはiframeにIDを提供することが重要です。メニューリンクからターゲット属性を削除する必要がなくなりました。

出典

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リンクが新しいウィンドウで開きます

答えて

関連する問題