我嘗試了很多建議的jquery代碼,最終找到了一個幾乎可以工作的代碼。在.php頁面上設置jquery的活動鏈接 - 不起作用
但它有一個缺陷 - 點擊一個鏈接後 - 鏈接將變爲非高亮顯示一秒(只要頁面加載),然後激活。點擊頁面完成加載php/html之後,是否可以立即高亮顯示鏈接?
因爲動畫可能性,找到jquery或javascript解決方案會很好嗎? 什麼是製作網站/主頁菜單的常用方式?
在此先感謝!所有的解釋或代碼示例都會非常棒!
HTML:
<DOCTYPE! html>
<html>
<head>
<title>TESTLEHT</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="naviwrap"><?php include("includes/menu.php"); ?></div>
<div class="clear"></div>
<div class="content"></div>
<div class"footer"><?php include("includes/footer.php"); ?></div>
<script src="scripts.js" type="text/javascript"></script>
</body>
</html>
包括菜單文件:
<nav class="menu">
<ul class="clearfix">
<li id="linkone" class="jlist" data-linkid="link1"><a href="index.php">Avaleht</a></li>
<li id="linktwo" class="jlist" class="current-item" data-linkid="link2"><a href="meist.php">Meist</a></li>
<li id="linkthree" class="jlist" data-linkid="ink3"><a href="tooted.php">Tooted</a></li>
<li id="linkfour" class="jlist" data-linkid="link4"><a href="galerii.php">Galerii</a></li>
<li id="linkfive" class="jlist" data-linkid="link5"><a href="kontakt.php">Kontakt</a></li>
</ul>
</nav>
CSS: 。菜單一{ 過渡:所有線性0.30s; 顏色:#ABABAB; font-size:16px; text-decoration:none; }
.menu li:hover > a, .menu .current-item > a {
text-decoration: none;
color: red;
}
.menu li:active > a, .menu .current-item > a {
color: red;
}
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 105%;
}
.menu > ul > li > a {
padding: 15px 45px;
margin-top: 15px;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
color: #282828;
}
當前的jQuery代碼,幾乎工程:
$(function() {
var str = location.href.toLowerCase();
$('nav ul li a').each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$('a.current-item').removeClass('current-item');
$(this).parent().addClass('current-item');
}
});
});
嘗試把內'$(文件)。就緒()jQuery代碼;' – Jessica