CSS當前類沒有被刪除

-1

我有以下菜單，我想根據url設置一個當前類，但它不工作，有誰知道爲什麼甚至更好的方式來實現這一點，謝謝： HTML -CSS當前類沒有被刪除

<ul class="dropdown"> 
         <li><a id="home" href="/">Home</a></li> 
         <li> 
          <a id="hospitals" href="/hca-hospitals">HCA Hospitals</a> 
          <ul class="sub_menu"> 
           <li id="one"><a href="/hca-hospitals/hospitals-and-outpatients">Hospitals and Outpatients</a></li> 
           <li id="two"><a href="/hca-hospitals/treatments">Treatments</a></li> 
          </ul> 
         </li> 
         <li> 
          <a id="benefits" href="/platinum-choice-benefits">Platinum Choice Benefits</a> 
          <ul class="sub_menu"> 
           <li id="one"><a href="/platinum-choice-benefits/download-voucher">Download Voucher</a></li> 
           <li id="two"><a href="/platinum-choice-benefits/where-you-can-go">Where you can go</a></li> 
          </ul> 
         </li> 
         <li> 
          <a id="find" href="/find-a-hca-consultant">Find a Consultant</a> 
         </li> 
         <li> 
          <a id="contact" href="/contact-hca">Contact</a> 
         </li> 
    </ul>

CSS -

ul.dropdown li a.current { color: #66c2c0;}

JQuery的 -

var pathname = $(location).attr('href'); 

     if (pathname = "/contact-hca") { 
      $("ul.dropdown li a#contact").addClass("current"); 
      $("ul.dropdown li a#find").removeClass("current"); 
     } 
     if (pathname = "/find-a-hca-consultant") { 
      $("ul.dropdown li a#find").addClass("current"); 
      $("ul.dropdown li a#contact").removeClass("current"); 
     }

來源

2014-02-22 Bob the Builder

使用'=='而不是'=' – Satpal

'ipathname =「/ contact-hca」'這將永遠是真實的，因爲您使用setter而不是比較。請參閱上面的@Satpal註釋 – Ohgodwhy

此外'id'是唯一的，您需要使用'class'來代替您的列表項目。 – Felix

有啊重新使用=而不是===，其實際分配pathname，而不是比較它。解決這個問題。

if (pathname === "/contact-hca") { 
    $("ul.dropdown li a#contact").addClass("current"); 
    $("ul.dropdown li a#find").removeClass("current"); 
} else if (pathname === "/find-a-hca-consultant") { 
    $("ul.dropdown li a#find").addClass("current"); 
    $("ul.dropdown li a#contact").removeClass("current"); 
}

來源

2014-02-22 17:51:57 dthree

這對我有用，因爲我也有子頁面 - var pathname = window.location.pathname; （pathname.indexOf（「find-a-hca-consultant」）> 0）{ $（「ul.dropdown li a＃find」）。addClass（「current」）; （「contact-hca」）> 0）{ } } else if（pathname.indexOf（「contact-hca」）> 0）{（「ul.dropdown li a＃contact」）。addClass（「current」）; } –

太棒了！很高興它的工作。 – dthree

在代碼中，你使用if (pathname = "/contact-hca")，這是不對的，因爲=代表賦值，並要比較值，這是==或===的平等。我會建議你使用後者，因爲它的速度更快，它的字面比較，它的作品更加堅固，例如：

5 == '5' // true 
5 === '5' // false

所以，你應該有以下修改代碼：此外

var pathname = $(location).attr('href'); 

if (pathname === "/contact-hca") { 
    $("ul.dropdown li a#contact").addClass("current"); 
    $("ul.dropdown li a#find").removeClass("current"); 
} 
if (pathname === "/find-a-hca-consultant") { 
    $("ul.dropdown li a#find").addClass("current"); 
    $("ul.dropdown li a#contact").removeClass("current"); 
}

，我建議您學習如何使用開發人員控制檯（每個瀏覽器都有自己的），這將幫助您確定代碼中的問題和問題。

來源

2014-02-22 17:52:30

感謝球員，但我無法讓這個工作，一定有別的地方的另一個問題。 –

我無法得到這個工作，因爲路徑名返回完整的url，而不僅僅是域後的位，謝謝everones的大力幫助！ –

謝謝maremp開發者控制檯是一個祝福，我沒有使用足夠的:-) –

CSS當前類沒有被刪除

回答

相關問題