我分开了三个文件。
1"的index.php"
<div id="content">
<?php include_once("template_main_aside.php"); ?>
</div>
<?php include_once("template_footer.php"); ?>
2&#34; template_main_aside.php&#34;
<aside id="main_aside">
<ul id="menu1">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a></li>
</ul>
</aside>
3&#34;的style.css&#34;
#content {
background-color: white;
display: block;
overflow: hidden;
height:1000px;
box-shadow: 0px 0px 7px #999;
}
#content > #main_aside {
padding-top: 30px;
width: 19%;
float: left;
box-shadow: 0px -2px 7px #999;
}
#content > #main_aside > ul {
margin:0;
padding:0;
}
#content > #main_aside > ul:first-child > li {
display: block;
margin: 0 0 20px 20px;
border-bottom: 1px solid #999;
padding-bottom: 10px;
}
#content > #main_aside > ul:first-child > li:last-child {
border-bottom: none;
}
#content > #main_aside > ul > li > a {
display: block;
padding: 5px 7px 7px 10px;
}
#content > #main_aside > ul > li > a:hover {
background: #fdb945;
color: #fff;
}
.selected a {
background: #fdb945;
color: #fff;
}
最后,
我正在尝试使用以下javascript代码来锁定橙色背景中所选菜单导航的样式:
<script>
$(function() {
$('#menu1 li').click(function() {
$('#menu1 li').removeClass('selected');
$(this).addClass('selected');
//$('a', this).addClass('selected');
});
});
</script>
我在JSFiddle执行此操作时有效:
但是当我处理我的本地文件时,我不确定应该在哪里放置javascript。 我已经尝试了&#34; index.php&#34;的正文部分,在#34; template_main_aside.php&#34;的结尾处。但是都不起作用。
请帮忙!
答案 0 :(得分:1)
您必须将其放入<head>
标记。
<head>
<script>
your js code here
</script>
</head>
您也可以引用js文件
<script src="yourJSfile.js"></script>
如果你的代码还包含jquery,你必须很好地添加jquery脚本。您可以在此处下载:http://jquery.com/download/
然后像这样添加:
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
答案 1 :(得分:1)
将它放在结束body
标记之上,但在此之前一定要引用jQuery,即
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('#menu1 li').click(function() {
$('#menu1 li').removeClass('selected');
$(this).addClass('selected');
//$('a', this).addClass('selected');
});
});
</script>
</body>
</html>
编辑:
src链接是 jQuery ,这是您正在使用的框架! (所有$
个标志)。在开始使用jquery之前,在页面中引用jquery始终很重要。在我从Google CDN加载它的示例中,实际上可能是您在自己的服务器上或本地有一个版本。在这种情况下,您只需链接到相对 - 例如,如果它位于名为js
的{{1}}文件夹中,则为:jquery
。
答案 2 :(得分:0)
你可以将javascript代码添加到php文件但是css。
试试这个
将javascript添加到
“template_main_aside.php”文件。
喜欢
`<script>
your js code here
</script>
<aside id="main_aside">
<ul id="menu1">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a></li>
</ul>
</aside>`
答案 3 :(得分:0)
Yo可以将JavaScript放在html或PHP文件中的任何位置。在页脚中加载JavaScript是Web开发中的流行趋势。因为它增加了一些页面的速度。加载第一个HTML代码,然后JavaScript开始执行其工作。所以在index.php中
<html>
<head>
</head>
<body>
<div id="content">
<?php include_once("template_main_aside.php"); ?>
</div>
<?php include_once("template_footer.php"); ?>
<!--jquery (load jquery.min.js before any coding on jquery )-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('#menu1 li').click(function() {
$('#menu1 li').removeClass('selected');
$(this).addClass('selected');
//$('a', this).addClass('selected');
});
});
</script>
</body>
</html>
或为JavaScript代码创建单独的文件。这样代码更易于管理。 在你的index.php中
<html>
<head>
</head>
<body>
<div id="content">
<?php include_once("template_main_aside.php"); ?>
</div>
<?php include_once("template_footer.php"); ?>
<!--jquery (load jquery.min.js before any coding on jquery )-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="url/to/main.js">
</body>
</html>
和你的main.js
$(function() {
$('#menu1 li').click(function() {
$('#menu1 li').removeClass('selected');
$(this).addClass('selected');
});
});