在哪里放置这段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');
                });
            });