如何更改後臺菜單在頁面上獲取url頁面激活

Question

我需要我的菜單激活並在瀏覽器上獲取url頁面。

例如： 如果我的網址頁面http：myweb.com/mypage.html或http：myweb.com/mypage.html#p1 將激活我的菜單1與背景的紅色

，如果我的網址頁面http ：myweb.com/mypage.html#p2 將激活我的menu2背景綠色。

#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

你不能做到這一點：目標選擇。在您的代碼示例#p1:target { background: red;}將添加背景：<div id="p1"> Page1 </div>

您的給定代碼的一個解決方案將使用JavaScript（jQuery在我的示例中）來突出顯示選定的菜單項。

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

使用純的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>