Question

我将模板分为三个部分，包括页眉，页脚和内容。主菜单链接在头文件中...所以我想将CSS类'active'应用于选中的超链接...我也编写了jquery代码，它是：

<script type="text/javascript">

  $('#emp').click(function() {
    $(this).closest('li').addClass('active');
  });

</script>

这段代码的问题是每当我点击链接时，它会附加CSS类然后将其删除。

Answer 1

每当我点击链接时，它都会附加css类，然后将其删除......

addClass不删除该类，似乎您的网页已重新加载。阻止事件的默认操作：

$('#emp').click(function(eventObject) {
    eventObject.preventDefault();
    $(this).closest('li').addClass('active');
});

更新

当您点击<a>元素时，页面会被重定向，并且您添加的类将被删除，如果您想使用JavaScript添加类，您可以编写代码：

// relative
var path = document.location.pathname;
// absolute
var path = document.location.href;

$('#myMenu a').filter(function(){
    return this.href === path;
}).closest('li').addClass('active');

// Or:
$('#myMenu li').has('a[href='+path+']').addClass('active');

Answer 2

我使用此方法解决此类问题

<?php $self= $_SERVER['PHP_SELF']; ?>

<ul class="dropdown dropdown-horizontal">

     <li <?php
     if (eregi("index", $self))
        echo "class=\"selected\"";
     ?>><a href="index" >HOME</a>
    </li>

    <li><img  style="height:28px" src="images/newsletter-divider.gif" alt="Divider"/></li>

     <li
     <?php
     if (eregi("logout", $self))
        echo "class=\"selected\"";
     ?>
     ><a href="logout">Logout</a>
    </li>
</ul>

如何在超链接codeigniter中应用类“active”

2 个答案: