问题描述
当我的页面URL标记为#时,我当前的项目突出显示工作就像一种魅力。 当我将实际的php文件创建到其他静态页面并更改href内的链接时,突出显示不再起作用。 我该怎么办?
的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>
包含的menu.php文件:
<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:
.menu {
width: 100%;
margin: 0px auto;
}
.menu li {
margin-top: 3.2%;
list-style-type: none;
font-family: Khmer UI;
}
.menu a {
transition: all linear 0.30s;
color: #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;
}
最后是在更改html中的href链接之前有效的jquery代码:
$(function(){
$('.jlist').click(function() {
$('.jlist').removeClass('current-item');
$(this).addClass('current-item');
});
});
1楼
您的问题将是,单击链接后将加载新页面,并且脚本将再次运行。
您可以在php中设置类,因为您知道哪个控制器正在加载该类