Make li active via javascript

Question

I want to make my li to be active using javascript. But the problem is, it's not working when only one click. Need a consecutive 2 clicks before it active. Can someone help me about this?

    <li data-popover="true" rel="popover" data-placement="right"><a href="#" data-target=".premium-menu" class="nav-header collapsed" data-toggle="collapse"><i class="fa fa-fw fa-book"></i> Lectures<i class="fa fa-collapse"></i></a></li>
    <li><ul class="premium-menu nav nav-list collapse in">
    <?php
         $sql ="SELECT enroll_ref FROM std_enrolled WHERE stud_no = '$stud_no'";
           $result = mysqli_query($con, $sql);

           while($row = mysqli_fetch_array($result)){
            $enroll_ref = $row['enroll_ref'];
             }



              $sql3 ="SELECT DISTINCT subj_descr FROM subj_enrolled WHERE enroll_ref = '$enroll_ref'";
           $results = mysqli_query($con, $sql3);
           while($row = mysqli_fetch_array($results)){
            $subj_descr = $row['subj_descr'];

    ?>

        <li><a class="item" href="viewlecture.php?subjdescr=<?php echo $subj_descr;?>"><span class="fa fa-caret-right"></span><?php echo ucwords(strtolower($subj_descr)); ?></a></li>
     <?php
      }  
     ?>
</ul></li>  

<script type="text/javascript">

$(".item").click(function() {
      $(this).parent('li').addClass("active");   
});

</script>

If the item being clicked is an anchor, doesn't that cause the page to navigate to the specified URL, effectively reloading the page? That's why the active class thing only works if you click the list item for the current page. (Also, your HTML is invalid because you're creating duplicate IDs.) — nnnnnn, Sep 25 '16 at 05:57
I already remove the `id` sir but still the same. Need to clicks before active. — wataru, Sep 25 '16 at 06:00
But as I said, clicking the link *causes the page to reload*, so any changes you made from JS to set active will be lost. You could update your PHP loop to add the class server-side. Or you could update your JS to run on document ready to check the current page URL query string to find out which item is supposed to be selected and then add the active class from there. — nnnnnn, Sep 25 '16 at 06:07
`$(".item").click(function(e) { e.preventDefault(); $(this).parent('li').addClass("active"); });` — mplungjan, Sep 25 '16 at 06:10
@mplungjan it worked sir only one click but the previous li class active is not disappearing. — wataru, Sep 25 '16 at 06:13
Where is the link going? If to the same window you need to use the url to pass the currently clicked link. Can't you just set the class server side? http://stackoverflow.com/questions/3494245/set-active-link-based-on-url — mplungjan, Sep 25 '16 at 06:15
It's either to the same window or not sir. `href="viewlecture.php?subjdescr=` — wataru, Sep 25 '16 at 06:18

score 0 · Accepted Answer · edited May 23 '17 at 10:27

Set the class server side if the list of links is in every viewlecture.php OR

Ajax the page

$(".item").on("click",function(e) { 
   e.preventDefault(); // stop link from reloading the page
   $("#lectureContainer").load(this.href); // load the lecture into a div or so
   $(this).closest("ul").find("li").removeClass("active"); 
   $(this).parent('li').addClass("active"); 
});

For more examples look here Set active link based on URL

Make li active via javascript

1 Answers1