Verstecke und zeige Divs aus dem Menü

Ich bin ziemlich Anfänger mit Javascript und kann nicht eine funktionierende Version einer Seite, die Divs basierend auf dem ausgewählten Menüpunkt anzeigen/verbergen würde. Ich höre immer auf, nur Menüpunkte sichtbar zu haben. Wie Zugriff auf und Inhalt zu Abschnitt des HTML aus dem Menü.Verstecke und zeige Divs aus dem Menü

Hiding ist probabbly ganz einfach, so etwas wie:

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

Aber ich habe nicht einen Weg zu zeigen, einen div im Zusammenhang mit Menüauswahl und verstecken Rest gefunden.

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

Quelle

2017-10-09 oneFinn

Hier wird ein Ansatz mit jQuery hide/show:

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

Quelle

2017-10-09 18:13:56 Syden

Verstecke und zeige Divs aus dem Menü

Antwort

Verwandte Themen