2014-09-09 2 views
0

Я создаю сайт, для которого мне нужно сделать активные атрибуты страницы на разных строках для разных страниц. Теперь я помещаю весь общий скрипт внутри заголовка файла и включаю его в каждый скрипт. Теперь, как я могу изменить содержание строки при ее включении на разные страницы?Как изменить содержимое файла, включенного в разные скрипты?

Заголовок выглядит следующим образом:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="islamic.css" rel="stylesheet"> 
    <link href='http://fonts.googleapis.com/css?family=Lato:400,300italic' rel='stylesheet' type='text/css'> 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    <style> 
    html,body 
    { 
      height: 1500px; 
    } 
    .grey 
     { 
     background-color: #ccc; 
     padding: 20px; 
     } 
    </style> 
    </head> 
    <body> 
     <!-- We are going to make this page for navigation purpose --> 

     <nav class="navbar navbar-inverse navbar-fixed-top" role = "navigation"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="icon-bar"> </span> 
         <span class="icon-bar"> </span> 
         <span class="icon-bar"> </span> 

        </button> 
        <a class="navbar-brand" href="index.php">ILM</a> 
       </div> 

       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li ><a href="index.php">Home</a></li> 
         <li ><a href="why.php">Discuss</a></li> 
         <li ><a href="aboutus.php">About Us</a></li> 
         <li ><a href="contacts.php">Contact</a></li> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Social <b class="caret"> </b></a> 
          <ul class="dropdown-menu"> 
          <li> <a href="http://www.facebook.com">Facebook</a></li> 
          <li> <a href="#">Twitter</a></li> 
          <li> <a href="#">Linked IN</a></li> 
          <li> <a href="#">You Tube</a></li> 
          </ul> 
          </li> 
        </ul> 
       </div> 
     </nav> 

Я хочу изменить линию

<li ><a href="index.php" >Home</a></li> 

в

<li class="active"><a href="index.php">Home</a></li> 

для домашней страницы. Теперь я хочу, чтобы изменить линию

<li ><a href="aboutus.php" >About Us</a></li> 

в

<li class="active"><a href="aboutus.php">Home</a></li> 

около нас страницы. Возможно ли это в php?

+0

Что это за сайт? Я имею в виду, когда вы нажимаете на меню, например, на домашнем, о, контакте, обсуждении или любой другой, будет ли перезагрузка полной страницы или она будет частично перезагружена? – HaBo

+0

Полная страница должна быть загружена. Это панель навигации. Теперь, перейдя на разные страницы, я хочу, чтобы разные элементы были активными. – jahan

ответ

0

вы можете попробовать somethign как этот

http://jsfiddle.net/habo/arjw2q6b/

Место этот код в конце вашего </body> тега. Угадайте свою страницу. У Urls будут метки привязки hrefs. одна загрузка каждой страницы после полного идентификатора документа, читаемого вашим скриптом, проверяет, содержит ли URL-адрес «index.php» или все другие hrefs, и если это произойдет, то он вызовет функцию resetActiveTab, что функция удалит активный класс для всех элементов списка (li) и добавить class=active на текущую страницу

$(function(){ 
    if(window.location.href.contains("index.php")){ 
     resetActiveTab("index.php"); 
    } 
    else if(window.location.href.contains("why.php")){ 
     resetActiveTab("why.php"); 
    } 
    else if(window.location.href.contains("aboutus.php")){ 
     resetActiveTab("aboutus.php"); 
    } 
} 
function resetActiveTab(mySelector){ 
    $(".navbar-nav li").each(function(key, value) { 
    //alert($(value).attr("class")); 
    $(value).removeClass("active"); 
     if($(value).find("a").attr("href") == mySelector){ 
      $(value).addClass("active"); 
     } 
    }); 
} 
+0

Не могли бы вы немного объяснить? – jahan

+0

обновил мой ответ. FYI: вам нужно добавить ссылку jQuery на ваш – HaBo

Смежные вопросы