在哪里放置这段JavaScript代码才能正常工作
Where to put this code of javascript to work properly
我有三个文件分开。
1."索引.php"
<div id="content">
<?php include_once("template_main_aside.php"); ?>
</div>
<?php include_once("template_footer.php"); ?>
2."template_main_aside.php"
<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."风格.css"
#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放在哪里。我已经尝试过"index.php"的正文部分,在"template_main_aside.php"的末尾,但都不起作用。
请帮忙!
把它放在结束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 之前,在页面中引用它始终很重要。在我从Google CDN加载它的示例中,实际上可能是您在自己的服务器上或本地拥有它的一个版本。在这种情况下,您只需相对链接到它 - 例如,如果它在名为jquery
的js
文件夹中,它将是:/js/jquery.js
。
把它放到<head>
标签中。
<head>
<script>
your js code here
</script>
</head>
你也可以引用 js 文件
<script src="yourJSfile.js"></script>
如果你的代码也包含jquery,你必须很好地添加jquery脚本ass。您可以在此处下载:http://jquery.com/download/
然后像这样添加它:
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
你可以将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>`
Yo 可以将 JavaScript 放在 html 或 PHP 文件中的任何位置。在页脚中加载JavaScript是Web开发的流行趋势。因为它提高了页面的一些速度。首先加载HTML代码,然后JavaScript开始工作。所以在索引中.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 代码制作单独的文件。这样代码更易于管理。在您的索引中.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>
在你的主.js
$(function() {
$('#menu1 li').click(function() {
$('#menu1 li').removeClass('selected');
$(this).addClass('selected');
});
});
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- javascript扫雷器floodfill算法不能正常工作