So ändern Sie das Hintergrundmenü aktiv mit Get URL Seite auf einer Seite

Question

Ich brauche mein Menü aktiv mit Get URL-Seite im Browser.

Beispiel: , wenn meine URL-Seite http: myweb.com/mypage.html oder http: myweb.com/mypage.html#p1 wird aktiv meine menu1 mit Hintergrund rot

und wenn meine URL Seite http : myweb.com/mypage.html#p2 aktiviert mein menu2 mit Hintergrund grün.

#p1:target { background: red;} 
 
#p2:target{ background: green;} 
 
#p3:target{ background: blue;} 
 
#p4:target{ background: yellow;} 
 
#p5:target{ background: coral;} 
 
#p6:target{ background: skyblue;}

<!--- My menu ---> 
 

 
<div id="menu"> 
 
    <input type="checkbox" id="tbl-menu"/> 
 
    <label for="tbl-menu"><img src="drop.png" height="40px" width="40px "alt=""></label> 
 
     <nav class="nav"> 
 
     \t <ul class="tombol"> 
 
     \t <li class="tombolmenu"><a class="t1" href="#p1">Menu1</a></li> 
 
      <li><a class="t2" href="#p2">Menu2</a></li> 
 
      <li><a class="t3" href="#p3">Menu3</a></li> 
 
      <li><a class="t4" href="#p4">Menu4</a></li> 
 
      <li><a class="t5" href="#p5">Menu5</a></li> 
 
      <li><a class="t6" href="#p6">Menu6</a></li> 
 
     \t </ul> 
 
     </nav>  
 
     </div> 
 

 
<!--- My page target ---> 
 

 
<div id="p1"> Page1 </div> 
 
<div id="p2"> Page2 </div> 
 
<div id="p3"> Page3 </div> 
 
<div id="p4"> Page4 </div> 
 
<div id="p5"> Page5 </div> 
 
<div id="p6"> Page6 </div>

Answer 1

Sie es mit nicht tun können: Zielselektor. In Ihrem Code Beispiel wird #p1:target { background: red;} Hintergrund hinzufügen: rot auf <div id="p1"> Page1 </div>

Eine Lösung mit dem angegebenen Code wäre Javascript zu verwenden (jquery in meinem Beispiel), um den ausgewählten Menüpunkt zu markieren.

var $navElement = $("nav li a"); 
 

 
$navElement.click(function() { 
 
    $("[class^='t']").not(this).removeClass('active'); 
 
    //[class^='t'] selects class starting with the letter t 
 
    $(this).addClass('active'); 
 
    //e.preventDefault(); 
 
});

.t1.active { background-color: red;} 
 
.t2.active{ background: green;} 
 
.t3.active{ background: blue;} 
 
.t4.active{ background: yellow;} 
 
.t5.active{ background: coral;} 
 
.t6.active{ background: skyblue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<nav class="nav"> 
 
    <ul class="tombol"> 
 
    <li class="tombolmenu"><a class="t1" href="#p1">Menu1</a></li> 
 
    <li><a class="t2" href="#p2">Menu2</a></li> 
 
    <li><a class="t3" href="#p3">Menu3</a></li> 
 
    <li><a class="t4" href="#p4">Menu4</a></li> 
 
    <li><a class="t5" href="#p5">Menu5</a></li> 
 
    <li><a class="t6" href="#p6">Menu6</a></li> 
 
    </ul> 
 
</nav>

Answer 2

Eine weitere Lösung mit reinem Javascript:

// at work environment replace next line with this: var addr = window.location.href; 
 
var addr = "google.com/index.html#p2" // this line is as example of script work. 
 
var arr = addr.split("#"); // split URL to 2 parts divided by # 
 
var ref = arr[1]; // select part of URL which comes after # 
 
var t = document.querySelectorAll('[href="#'+ref+'"]'); // find all elements <a> with related href, result is array 
 
t[0].parentNode.className = ref; // assign className to parent node of first element of found <a> array

.p1 { background: red;} 
 
.p2 { background: green;} 
 
.p3 { background: blue;} 
 
.p4 { background: yellow;} 
 
.p5 { background: coral;} 
 
.p6 { background: skyblue;}

<div id="menu"> 
 
    <input type="checkbox" id="tbl-menu"/> 
 
    <label for="tbl-menu"><img src="drop.png" height="40px" width="40px" alt=""></label> 
 
     <nav class="nav"> 
 
     \t <ul class="tombol"> 
 
     \t <li class="tombolmenu"> 
 
     \t  <a class="t1" href="#p1">Menu1</a></li> 
 
      <li><a class="t2" href="#p2">Menu2</a></li> 
 
      <li><a class="t3" href="#p3">Menu3</a></li> 
 
      <li><a class="t4" href="#p4">Menu4</a></li> 
 
      <li><a class="t5" href="#p5">Menu5</a></li> 
 
      <li><a class="t6" href="#p6">Menu6</a></li> 
 
     \t </ul> 
 
     </nav>  
 
     </div> 
 

 
<!-- My page target --> 
 

 
<div id="p1"> Page1 </div> 
 
<div id="p2"> Page2 </div> 
 
<div id="p3"> Page3 </div> 
 
<div id="p4"> Page4 </div> 
 
<div id="p5"> Page5 </div> 
 
<div id="p6"> Page6 </div>