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) {}

此外，如果您只是想知道是否匹配，请不要使用String.prototype.match功能，请使用RegExp.prototype.test功能。

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');

加载到不同的页面时，请记住li活动状态？

2 个答案: