0

I am new to CSS and J Query. Here i want to highlight Nav bar item which has multiple links under the page. Each links leads to a new page.

The problem is nav bar active class is just disappearing when i click another link which leads to different page, loosing its active state. How to maintain the active state of nabvar item even if i navigate to any other page.

header1.php contains navbar and i am including it using include("header1.php") in required files where i have multipe links.

header1.php

<nav class="navbar navbar-default navbar-fixed-top">

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="adminhome.php"><span class="glyphicon glyphicon glyphicon-home"></span</a>
</div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="<?php active('totalapplications.php');?>" id='a1'><a  href="totalapplications.php">Applications</a></li>
<li class="<?php active('block.php');?>" id='b2' ><a  href="block.php">Block</a></li>
   <li class="<?php active('roomallotment.php');?>" id='r3'><a  href="roomallotment.php">Allotment</a></li>
    <li class="<?php active('deallotsingle.php');?>" id='d4'><a  href="deallotsingle.php">De-allotment</a></li>

    <li class="<?php active('viewblocks.php');?>" id='v5'><a  href="viewblocks.php">Hostel Details</a></li>
    <li class="<?php active('student_details_master.php');?>" id='s6'><a  href="student_details_master.php">Student Database</a></li>
    <li class="<?php active('searchallotment1.php');?>" id='s7'><a  href="searchallotment1.php">Search</a></li>

sample.php

<?php
      include("databaseconnection.php");
      include("header1.php");?>
      <div class="btn-group" role="group" aria-label="...">
      <a href="student_details.php"><button type="button" class="btn btn-primary btn-block" onClick="boldButton1(1)">Fresh Applications</button></a></div>
      <div class="btn-group" role="group" aria-label="...">
      <a href="renewalstudent_details.php"><button type="button" class="btn btn-primary btn block">Renewal Applications</button></a></div>

header1.php is included in sample.php which has multiple page links. How i can maintain the nav item active state even after navigating to another page by those links.

Please check below links for images. Thank You.

!Image which show navbar item active.

!This image shows the page is navigated to some other page and navbar item lost its active state.

sparkrish77
  • 27
  • 2
  • 5
  • Use $_SERVER["PHP_SELF"]. Like **if($_SERVER["PHP_SELF"]==student_details.php){echo 'class="active"'}** – Zaid Bin Khalid May 11 '17 at 07:14
  • This might be the answer for your question http://stackoverflow.com/questions/10523433/how-do-i-keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload – Vinod Chandak May 11 '17 at 07:16

0 Answers0