引導與得到的網址導航積極李項

我有這樣的：引導與得到的網址導航積極李項

<ul class="nav navbar-nav"> 
<li><a href="?orderBy=new">Link1</a></li> 
<li><a href="?orderBy=old">Link2</a> </li> 
<li><a href="?orderBy=best">Link3</a></li> 
<li><a href="?orderBy=worst">Link4</a></li> 
</ul>

我想這樣用戶就知道他是在什麼頁面添加活動類。我最好的想法是讓li項目具有唯一的id，並在jquery中檢查id = 1是否將活動類設置爲「Link1」。即使這個工程，我不能停止想知道是否有更好的解決方案，更優雅的？

來源

2017-03-12 Energizem

http://stackoverflow.com/q/15963757/3597276 –

如果你有php，那麼你可以比較$ _GET的值。類似的東西：

<li <?=$_GET['order_by']=='new' ? 'class="active"' : '';?>> 
<a>link</a> 
</li>

來源

2017-03-12 19:48:26 cssBlaster21895

我會不喜歡它cssBlaster21895服務器端已經顯示，但是你可以用JavaScript做客戶端了。

var links = document.getElementsByClassName('nav')[0].getElementsByTagName('a'), 
 
    qString = window.location.search; 
 

 
for (var i = 0; i < links.length; i++) { 
 
    var link = links[i]; 
 
    if (qString == link.getAttribute('href')) { 
 
    link.classList.add('active'); 
 
    } else { 
 
    link.classList.remove('active'); 
 
    } 
 
}

<ul class="nav navbar-nav"> 
 
    <li><a href="?orderBy=new">Link1</a></li> 
 
    <li><a href="?orderBy=old">Link2</a> </li> 
 
    <li><a href="?orderBy=best">Link3</a></li> 
 
    <li><a href="?orderBy=worst">Link4</a></li> 
 
</ul>

來源

2017-03-12 20:30:53

引導與得到的網址導航積極李項

回答

相關問題