加載到不同頁面時記住li活動狀態嗎？

Question

下面我有我的代碼：

<ul id="profileList" class="nav nav-list"> 
     <li><a href="<?php echo base_url('user/signature')?>">修改個人簽名檔</a></li> 
     <li><a href="<?php echo base_url('user/location')?>">修改個人居住地</a></li> 
     <li><a href="<?php echo base_url('user/education')?>">修改個人學校專業</a></li> 
    </ul> 

而且這裏的JS代碼：

<script type="text/javascript"> 
$(document).ready(function() { 

    // store url for current page as global variable 
    current_page = document.location.href 

    // apply selected states depending on current page 
    if (current_page.index(/signature/)) { 
     $("ul#profileList li:eq(0)").addClass('active'); 
    } else if (current_page.match(/location/)) { 
     $("ul#profileList li:eq(1)").addClass('active'); 
    } else if (current_page.match(/education/)) { 
     $("ul#profileList li:eq(2)").addClass('active'); 
    } else { // don't mark any nav links as selected 
     $("ul#profileList li").removeClass('active'); 
    }; 

    }); 
</script> 

當我點擊第二個和第三個項目裏，他們工作得很好。但是，當我點擊第一項， 該項目不會變得活躍。什麼是錯的，爲什麼？

Answer 1

在

if (current_page.index(/signature/)) { 

更改爲

if (current_page.match(/signature/)) { 

Answer 2

據我所知，String.prototype.index不存在。也許你想使用indexOf方法。

if (current_page.indexOf('signature') !== -1) {} 

此外，當你只是想知道如果有一個匹配與否，使用RegExp.prototype.test功能不使用String.prototype.match功能。

if (/education/.test('education')) { /*matches*/ } 

不過你的情況，你可以使用match方法，而不是放棄比賽，在你的優勢使用它：

var sections = ['signature', 'location', 'education'], 
    match = document.location.href.match(new RegExp(sections.join('|'), 'i')), 
    selectorSuffix = match? ':eq(' + sections.indexOf(match[0].toLowerCase()) + ')' : ''; 

$('ul#profileList li' + selectorSuffix)[(match? 'add' : 'remove') + 'Class']('active');