メニューからdivを隠して表示する

私はjavascriptでかなり初心者です。選択したメニュー項目に基づいてdivを表示/非表示にする作業バージョンのページを取得できません。私はいつもメニュー項目だけを見えるように終わります。メニューからhtmlのコンテンツ部分にアクセスしてどのようにコントロールするか。メニューからdivを隠して表示する

非表示は、probabblyのようなものは非常に簡単です：

$("#div1").hide(); 
$("#div2").hide();

しかし、私は、メニューの選択や隠れ残りの部分に関連するdiv要素を表示する方法を発見していません。ここで

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > 
<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <style> 
     // menu css 
     .hor_menu{display: inline-block;} 
     .hor_menu{ height: 25; font-size: 18px;} 
     .hor_menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;} 
     .hor_menu li.active { 
     background-color: #e9e9e9; 
     } 
     .hor_menu li:hover {text-decoration: underline;} 
    </style> 
    </head> 
    <body> 
    //top menu 
    <ul class="hor_menu" id="menu"> 
     <li a class="active" id="item1"><a>Menu item 1</a></li> 
     <li id="item2">Menu item 2</li> 
     <li id="item3">Menu item 3</li> 
    </ul> 
    // content divs 
    <div id="div1"> 
     <p>Show me when menu item 1 selected</p> 
    </div> 
    <div id="div2"> 
     <p>Show me when menu item 2 selected</p> 
    </div> 
    <div id="div3"> 
     <p>Show me when menu item 3 selected</p> 
    </div> 
    <script type="text/javascript"> 
     var make_menuitem_active = function() 
     { 
     //Get menu siblings 
     var siblings =($(this).siblings()); 

     //Deactivate selection 
     siblings.each(function (index) 
      { 
      $(this).removeClass('active');  
      } 
     ) 
     //Add the clicked button class 
     $(this).addClass('active'); 
     } 
     //Attach events to menu 
     $(document).ready(
     function() 
     { 
      $(".hor_menu li").click(make_menuitem_active); 
     } 
    ) 
    </script> 
    </body> 
</html>

出典

2017-10-09 oneFinn

はjQueryの表示/非表示を使用してのアプローチです：

$(document).ready(function() { 
 
    make_menuitem_active(); 
 
}) 
 

 
function make_menuitem_active() { 
 
    $("#div1").show(); 
 
    $("#div2").hide(); 
 
    $("#div3").hide(); 
 
    $("#item1").on("click", function() { 
 
    $(this).addClass("active"); 
 
    $(this).siblings().removeClass("active"); 
 
    $("#div1").show(); 
 
    $("#div1").siblings("div").hide(); 
 
    }) 
 
    $("#item2").on("click", function() { 
 
    $(this).addClass("active"); 
 
    $(this).siblings().removeClass("active"); 
 
    $("#div2").show(); 
 
    $("#div2").siblings("div").hide(); 
 
    }) 
 
    $("#item3").on("click", function() { 
 
    $(this).addClass("active"); 
 
    $(this).siblings().removeClass("active"); 
 
    $("#div3").show(); 
 
    $("#div3").siblings("div").hide(); 
 
    }) 
 
}

.hor_menu { 
 
    display: inline-block; 
 
} 
 

 
.hor_menu { 
 
    height: 25; 
 
    font-size: 18px; 
 
} 
 

 
.hor_menu li { 
 
    list-style: none; 
 
    float: left; 
 
    margin-right: 4px; 
 
    padding: 5px; 
 
} 
 

 
.hor_menu li.active { 
 
    background-color: #e9e9e9; 
 
} 
 

 
.hor_menu li:hover { 
 
    text-decoration: underline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="hor_menu" id="menu"> 
 
    <li class="active" id="item1"><a>Menu item 1</a></li> 
 
    <li id="item2">Menu item 2</li> 
 
    <li id="item3">Menu item 3</li> 
 
</ul> 
 
<div id="div1"> 
 
    <p>Show me when menu item 1 selected</p> 
 
</div> 
 
<div id="div2" class="hide"> 
 
    <p>Show me when menu item 2 selected</p> 
 
</div> 
 
<div id="div3" class="hide"> 
 
    <p>Show me when menu item 3 selected</p> 
 
</div>

出典

2017-10-09 18:13:56 Syden

メニューからdivを隠して表示する

答えて

関連する問題