Question

我需要我的菜单处于活动状态，并在浏览器上获取网页。

例如：如果我的网址是http：myweb.com/mypage.html或http：myweb.com/mypage.html#p1 将激活我的menu1与背景红色

如果我的网址是http：myweb.com/mypage.html#p2 将以背景绿色激活我的menu2。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您无法使用：目标选择器。在您的代码示例中，#p1:target { background: red;}会在<div id="p1"> Page1 </div>

上添加background：red

使用您给定代码的一个解决方案是使用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">
        	<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>    
      </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>

如何在一页的get url页面上激活后台菜单

2 个答案: