Question

我正在创建一个网站，我必须在不同页面的不同行上创建页面活动属性。现在我将整个公共脚本放在文件头中并将其包含在每个脚本中。现在，如何在不同页面上包含该行时更改行的内容？

标题如下：

<!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中有可能吗？

Answer 1

你可以试试这样的事情

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

将此代码放在</body>标记的末尾。猜测您的网页网址会有锚标记hrefs。在完整文档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");
       }
    });
}

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

1 个答案: