サブメニューが、私は左側に、このようなサブメニューをこの ようなページを持っている

Question

表示されます

<div id="menuwindo1">Window associated with menu 1</div> 
<div id="menuwindo2">Window associated with menu 2</div> 

馬の目標は、我々はメニュー上（左側）1つのdivをクリックしたとき、それは、関連するウィンドウが表示され、我々は他のメニューのdivをクリックしたとき、それは他をしながらTISウィンドウが表示されます作ることを確認することです姿を消す。

私は正直なところそれをする方法を知らない...いくつかの提案？

私は他の投稿でそれを見つけようとしましたが、他の質問があまりにも具体的でないか、回答がうまくいかなかった。

Answer 1

サイドサブメニューナビゲーションバーとメインコンテンツウィンドウをどのように実装し、jQueryを使用してクリック時にコンテンツを切り替えるかを実証しました。それが役に立てば幸い。

$(document).ready(function() { 
 
    $("#submenu2").click(function() { 
 
    $("#window1").hide(); 
 
    $("#window2").show(); 
 
    }); 
 
    $("#submenu1").click(function() { 
 
    $("#window2").hide(); 
 
    $("#window1").show(); 
 
    }); 
 
});

.menu-navbar { 
 
    width: 20%; 
 
    height: 100vh; 
 
    background: red; 
 
    float: left; 
 
} 
 

 
#submenu1, 
 
#submenu2 { 
 
    cursor: pointer; 
 
    background: white; 
 
    border:1px solid black; 
 
} 
 

 
.window { 
 
    height: 100vh; 
 
    background: gray; 
 
    text-align: center; 
 
} 
 

 
#window1 { 
 
    background: yellow; 
 
} 
 

 
#window2 { 
 
    background: green; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu-navbar"> 
 
    <div id="submenu1">Menu 1</div> 
 
    <div id="submenu2">Menu 2</div> 
 
</div> 
 
<div class="window"> 
 
    <div id="window1">Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content 
 
    of submenu1Content of submenu1</div> 
 
    <div id="window2">Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2</div> 
 
</div>