Question

您好我有多个基于用户角色的系统。每个用户都有很多页面，所以为了减少代码，我使用了带有标题的header.php文件，因为它对每个页面都是通用的。我想知道如何将活动标签应用于使用javascript打开页面的元素。我已经附加了使用php回显的代码，它在php echo标签内。例如，如果我打开家，那么应该将class ='active'添加到home的li。

if($role=='S')
{
 echo"<div class='navbar navbar-default' id='navbar-second'>
<ul class='nav navbar-nav no-border visible-xs-block'>
    <li><a class='text-center collapsed' data-toggle='collapse' data-target='#navbar-second-toggle'><i class='icon-menu7'></i></a></li>
</ul>

<div class='navbar-collapse collapse' id='navbar-second-toggle'>
    <ul class='nav navbar-nav'>
        <li><a href='home'><i class='icon-home position-left'></i> Home</a></li>
        <li><a href='examresult'><i class='icon-clipboard position-left'></i> Exam Result</a></li>
        <li><a href='attendance'><i class='icon-checkbox-checked2 position-left'></i> Attendance</a></li>
        <li><a href='timetable'><i class='icon-table2 position-left'></i> Time Table</a>
        <li><a href='assignment'><i class='icon-stack3 position-left'></i> Assignment</a></li>
        <li><a href='documents'><i class='icon-files-empty position-left'></i> Documents</a></li>
        <li><a href='feedback'><i class='icon-pencil4 position-left'></i> Feedback</a></li>
        <li><a href='profile'><i class='icon-user position-left'></i> My Profile</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-right'>
        <li>
            <a href='developers' style='font-size:15px;'><i class='icon-hammer-wrench position-left'></i>&nbsp;&nbsp;Developers</a>
        </li>
    </ul>
</div>
 </div> 
  ";}

我试过这个javascript代码，但它不能正常工作： -

 var selector = '.nav navbar-nav li';

 $(selector).on('click', function(){
 $(selector).removeClass('active');
 $(this).addClass('active');
 });

Answer 1

试试这个：

$('#navbar-second-toggle')
  .find('a[href="' + location.pathname + '"]')
  .parent('li')
  .addClass('active')

Answer 2

如果重新编写引擎，则将其配置为引擎集。但这是你可以这样做的方式。

<强> PHP：

让您点击链接，即可获得

$option = $_GET['option'];
$$option = "class='active'";

<强> HTML

<ul class='nav navbar-nav'>
  <li <?php echo @$home;?>><a href='index.php?option=home'><i class='icon-home position-left'></i> Home</a></li>
  <li <?php echo @$examresult;?>><a href='index.php?option=examresult'><i class='icon-clipboard position-left'></i> Exam Result</a></li>
  <li <?php echo @$attendance;?>><a href='index.php?option=attendance'><i class='icon-checkbox-checked2 position-left'></i> Attendance</a></li>
  <li <?php echo @$timetable;?>><a href='index.php?option=timetable'><i class='icon-table2 position-left'></i> Time Table</a>
  <li <?php echo @$assignment;?>><a href='index.php?option=assignment'><i class='icon-stack3 position-left'></i> Assignment</a></li>
  <li <?php echo @$documents;?>><a href='index.php?option=documents'><i class='icon-files-empty position-left'></i> Documents</a></li>
  <li <?php echo @$feedback;?>><a href='index.php?option=feedback'><i class='icon-pencil4 position-left'></i> Feedback</a></li>
  <li <?php echo @$profile;?>><a href='index.php?option=profile'><i class='icon-user position-left'></i> My Profile</a></li>
</ul>

<强> CSS

.active{
  color: red;
}

如何动态地向li元素添加活动类？

2 个答案: