2016-06-02 7 views
1

ich zur Zeit auf einer Website mit dieser Vorlage arbeite:zeigen aktives Menü während der Benutzer auf dem Menü und ändern, wenn das Menü geändert wird

<!DOCTYPE html> 
<html lang="en" > 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<link rel="icon" type="image/gif/png" href=""> 
<meta charset="utf-8"> 
<title><?php echo $title; ?></title> 
<link rel="stylesheet" type="text/css" href="" media="all"> 
</head> 
<body> 

<div class="wrapper"> 
<div class="banner"> 

</div> 
<div class="nav_bar"> 
    <ul> 
    <li><a class="home" href="">Home</a></li> 
    <li><a class="news" href="">News</a></li> 
    <li><a class="r_faqs" href="">Registration FAQs</a></li> 
    <li><a class="howto" href="">How to Register and Rules</a></li> 
     <li><a class="sch_reg" href="">Register school</a></li> 
     <li><a class="p_reg" href="">Register pupil</a></li> 
    <li><a class="about" href="">About Us</a></li> 
     <li><a class="contact" href="">Contact Us</a></li> 
    </ul> 

</div> 
<div class="content_area"> 
    <?php echo $content; ?> 
</div> 
<div class="clear"></div> 
</div> 
<div class="footer"> 
<div>  
</div> 
</div> 

</body> 
</html> 

ich die Navigation vertikal wie mit dem Inhalt auf der rechten Seite gestylt habe in Diese Seite http://learn.shayhowe.com/advanced-html-css/complex-selectors/ Jetzt ist die Frage, wie behalte ich das aktive Menü markiert, während der Benutzer auf dieser Seite ist. Sie können meine Seite hier https://jsfiddle.net/96wxdzk7/3/

Antwort

0
<ul class="sub-nav" > 
<?php 
    $full_name = $_SERVER['PHP_SELF']; 
    $name_array = explode('/',$full_name); 
    $count = count($name_array); 
    $page_name = $name_array[$count-1]; 
?> 
<li><a class="<?php echo ($page_name=='where-to-buy.php')?'active':'';?>" href="where-to-buy.php">WHERE TO BUY</a></li> 
<li><a class="<?php echo ($page_name=='about.php')?'active':'';?>" href="about.php">ABOUT US</a></li> 
<li><a class="<?php echo ($page_name=='contact.php')?'active':'';?>" href="contact.php">CONTACT US</a></li> 

auch folgen unten URL für Live-Demo für diese .. https://webdesignerhut.com/active-class-navigation-menu/

+0

lassen Sie mich sehen versuchen, dass – lil

+0

die – lil

+0

Arbeit den Ball hielt Sie unter URL überprüfen können Arbeitsbeispiel https://webdesignerhut.com/active-class-navigation-menu/ – Kuldeep

Verwandte Themen