設置活動鏈接基於URL

如果URL結尾：?style=product我想一類active添加到li與類的product設置活動鏈接基於URL

HTML：

<ul id="menulist"> 
    <li class="product">Product</li> 
    <li class="product2">Product 2</li> 
    <li class="product3">Product 3</li> 
</ul>

來源

2010-08-16 CLiown

當你的HTML輸出時，你最好做這個服務器端。 – 2010-08-16 14:49:44

你或許應該安迪去並提供這個服務器端，但回答你的問題，這是你應該做的，以達到在JavaScript/jQuery相同（如果沒有服務器端）

肯定有更容易的方法來獲得'樣式'查詢字符串，如果你可以做出很多關於網址的假設（它總是會有這個查詢字符串，它始終是查詢字符串，它永遠不會有任何其他查詢字符串，永遠不會有任何散列查詢字符串後的數據...）。如果你不能作出這樣的假設，下面可能是最安全的方式。

var activeStyle = ''; 

if(window.location.search != '') { 
    // find querystring section or url 
    var query = window.location.search.substring(1); 

    // split querystring into key/value-pairs 
    query = query.split('&'); 

    for(var i = 0; i < query.length; i++) { 

     // split key/value pair into key and value 
     var keyvalue = query[i].split('='); 

     // find value of ?style= 
     if(keyvalue[0].toLowerCase() == 'style')) { 
      activeStyle = keyvalue[1]; 
      break; 
     } 
    } 
} 

if(activeStyle != '') { 
    $('li.' + activeStyle).addClass('active'); 
}

請注意，我假設你也想product2成爲active在您的網址style=product2結束的情況下。如果您只有希望在選擇product應用這種效果，你就必須在最後一個條件調整到

if(activeStyle.toLowerCase() == 'product') { 
    $('li.product').addClass('active'); 
}

編輯

編輯的上述選擇使用window.location.search而是拿起根據安迪的建議，其中警衛location.hash。

來源

2010-08-16 14:49:53

嗯，更好的答案，然後我的猜測，upvote for you！ – Rakward 2010-08-16 14:52:24

不要忘記，你可以使用* window.location。搜索*只獲得URL的查詢字符串部分，那麼你不必擔心哈希:-) – 2010-08-16 14:54:00

@Andy：很好！這樣更好，因爲我原來的代碼並不十分擔心哈希值。編輯 – 2010-08-16 15:00:00

你可以得到當前的URL中的jQuery這樣的：

$(location).attr('href');

後，再切斷一切「？用正則表達式，得到侑當前頁面

一類添加到正確的李項：

$('li.'+style+').addClass('active');

來源

2010-08-16 14:50:52 Rakward

首先登場的，您需要一個JavaScript函數類似一個貼here，這將允許你從查詢字符串中獲取樣式變量。

一旦你有試着這麼做：

var style = getParameterByName('style'); 
$('li.' + style).addClass('active');

來源

2010-08-16 14:51:24 simnom

var style = '<?php echo $_GET['style'] ?>'; 
if(style == 'product'){ 
    $('li.product').addClass('active'); 
}

來源

2010-08-16 14:51:27

function getStyleValue(uri) 
{ 
    var var, hash; 
    var hashes = uri.slice(uri.indexOf('?') + 1).split('&'); 

    for(var i = 0; i < hashes.length; i++) 
    { 
     hash = hashes[i].split('='); 
     if(hash[0] == 'style') 
     { 
      return hash[2]; 
     } 
    } 
    return false; 
}

那麼你可以使用像

var selected = getStyleValue('index.php?style=product2') || "product"; 
$('a.' + selected).addClass('selected');

來源

2010-08-16 14:52:53 RobertPitt

使用location.href來讀取查詢參數...

function getQuerystring(key, default_) { 
     if (default_==null) default_=""; 
     key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 
     var regex = new RegExp("[\\?&]"+key+"=([^&#]*)"); 
     var qs = regex.exec(window.location.href); 
     if(qs == null) 
     return default_; 
     else 
     return qs[1]; 
    } 

    var target = $("." + getQueryString("style", "default"));

來源

2010-08-16 14:53:03 user409021

設置活動鏈接基於URL

回答

相關問題