如何更改包含在不同脚本中的文件的内容？答案

【问题标题】：How to change the content of a file which is included in different scripts?如何更改包含在不同脚本中的文件的内容？
【发布时间】：2014-09-09 17:07:23
【问题描述】：

我正在制作一个网站，我必须为不同页面在不同行上设置页面活动属性。现在我将整个通用脚本放在文件头中，并将其包含在每个脚本中。现在如何在不同页面上包含一行时更改其内容？

标题如下：

<!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可以吗？

【问题讨论】：

这是什么类型的网站？我的意思是当您单击主页、关于、联系、讨论或任何其他菜单时，整个页面会重新加载还是部分重新加载？
应该加载整页。它是导航栏。现在转到不同的页面，我希望不同的项目处于活动状态。

标签： javascript php html include

【解决方案1】：

你可以试试这样的

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

将此代码放在</body> 标记的末尾。猜测您的页面 Urls 将具有锚标签 href。在读取完整文档 ID 后，每个页面加载一个您的脚本将检查 URL 是否包含“index.php”或所有其他 href，如果包含，则它将调用函数 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");
       }
    });
}

【讨论】：

你能解释一下吗？
更新了我的答案。仅供参考：您需要将 jQuery 引用添加到您的