位於根目錄中的我的索引頁的CSS不起作用。我正在使用PHP來包含一個包含導航欄的標題,但導航欄的CSS不起作用。它可以在其他頁面上正常工作,但位於根索引中的任何頁面都沒有該CSS。CSS未顯示在根目錄中
編輯:通過更改路徑到URL然後在css的文件目錄解決。
Solved
<link rel="stylesheet" type="text/css" href="/bootstrapwebsite/CSS/main.css">
Index.php
<html>
<?php
include '/includes/header.php';
?>
</html>
header.php
<html>
<title>Bootstrap Basics</title>
<!-- Gather all Required CSS -->
<link rel="stylesheet" type="text/css" href="../CSS/main.css">
<link rel="stylesheet" type="text/css" href="../CSS/header.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- End the css get -->
<!-- Gather the jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- End the jquery get -->
<div>
<header id="navigationHeader" class="navbar" role="banner">
<div class="container">
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-left mainnav-menu">
<li>
<a id="logo" href="#"><img src=""></img></a>
</li>
</ul>
<ul id="navbar" class="nav navbar-nav navbar-right">
<li>
<h4><i class="fa fa-group"></i><a href="http://localhost/bootstrapwebsite/players/players.php"> Players </a></h4>
</li>
<li>
<h4><i class="fa fa-shopping-cart"></i><a href="http://localhost/bootstrapwebsite/shop/shop.php"> Shop </a></h4>
</li>
<li>
<h4><i class="fa fa-list-ol"></i><a href="http://localhost/bootstrapwebsite/leaderboards/leaderboards.php"> Leaderboards </a></h4>
</li>
<li>
<h4><i class="fa fa-phone"></i><a href="http://localhost/bootstrapwebsite/support/support.php"> Support </a></h4>
</li>
<li>
<h4>
<a href="http://localhost/bootstrapwebsite/Registration/login.php"><i class="fa fa-user"></i> Guest </a>
</h4>
</li>
</ul>
</nav>
</div> <!-- /.container -->
</header>
</div>
</html>
<!-- javascript to determine current page and set it as active -->
<script>
$(document).ready(function() {
//Get CurrentUrl variable by combining origin with pathname, this ensures that any url appendings (e.g. ?RecordId=100) are removed from the URL
var CurrentUrl = window.location.origin+window.location.pathname;
//Check which menu item is 'active' and adjust apply 'active' class so the item gets highlighted in the menu
//Loop over each <a> element of the NavMenu container
$('#navbar a').each(function(Key,Value)
{
//Check if the current url
if(Value['href'] === CurrentUrl)
{
//We have a match, add the 'active' class to the parent item (li element).
$(Value).parent().addClass('active');
}
});
});
</script>
<!-- end javascript -->