Question

我分开了三个文件。

1＆＃34;的index.php＆＃34;

<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;的结尾处。但是都不起作用。

请帮忙！

Answer 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>

Answer 2

将它放在结束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。

Answer 3

你可以将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>`

Answer 4

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');

                });
            });

在哪里放置这个javascript代码才能正常工作

4 个答案: