php - My javascript is not working in XAMPP

I want to make my menu to be responsive but my javascript is not working on XAMPP. This is my code:

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<html>
<title>The Forerunner</title>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://127.0.0.1/js/jquery-3.1.1.js"> </script>
<script type="text/javascript" src="http://127.0.0.1/js/menu.js"></script>
</head>



<body>

<div id="banner">

    <img src="img/TheForerunner.png">

</div>

    <span class="menu-trigger">MENU</span>

    <ul class="nav">

        <li><a href="news.php">NEWS</a></li>
        <li><a href="editorial.php">EDITORIAL</a></li>
        <li><a href="features.php">FEATURES</a></li>
        <li><a href="devm.php">DEVCOMM</a></li>
        <li><a href="literary.php">LITERARY</a></li>
        <li><a href="sports.php">SPORTS</a></li>
        <li><a href="entertainment.php">ENTERTAINMENT</a></li>
        <li><a href="about.php">ABOUT</a></li>

    </ul>


</body>

</html>

and I don't get any error on my browser's console. I'm using google chrome

$("span.menu-trigger").click(function() {
  $("ul.nav").toggle();
});

When I run it I can't click the menu. I don't get any error on my console.

I want to make my menu to be responsive but my javascript is not working on XAMPP. This is my code:

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<html>
<title>The Forerunner</title>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://127.0.0.1/js/jquery-3.1.1.js"> </script>
<script type="text/javascript" src="http://127.0.0.1/js/menu.js"></script>
</head>



<body>

<div id="banner">

    <img src="img/TheForerunner.png">

</div>

    <span class="menu-trigger">MENU</span>

    <ul class="nav">

        <li><a href="news.php">NEWS</a></li>
        <li><a href="editorial.php">EDITORIAL</a></li>
        <li><a href="features.php">FEATURES</a></li>
        <li><a href="devm.php">DEVCOMM</a></li>
        <li><a href="literary.php">LITERARY</a></li>
        <li><a href="sports.php">SPORTS</a></li>
        <li><a href="entertainment.php">ENTERTAINMENT</a></li>
        <li><a href="about.php">ABOUT</a></li>

    </ul>


</body>

</html>

and I don't get any error on my browser's console. I'm using google chrome

$("span.menu-trigger").click(function() {
  $("ul.nav").toggle();
});

When I run it I can't click the menu. I don't get any error on my console.

Share Improve this question edited Feb 27, 2017 at 11:33 asked Feb 27, 2017 at 11:22 Kim Russel Flores 351 gold badge1 silver badge4 bronze badges

1 any error message in console? – Rome Commented Feb 27, 2017 at 11:23
Did you check your browser's network tab to confirm if the files were loaded? – Raj Commented Feb 27, 2017 at 11:23
1 I am not sure if this is the right way => src="http://127.0.0.1/js/jquery-3.1.1.js". You dont need the http://127.0.0.1 part , you should provide the path relative to the app root. – mane Commented Feb 27, 2017 at 11:24
Any errors in the console? Do those elements exist? Have you put the jQuery code inside a document.ready handler? $(function() { /* your code here */ }); – Rory McCrossan Commented Feb 27, 2017 at 11:24
Post the total code. The HTML with span.menu-trigger and ul.nav is missed in your question. – user2342558 Commented Feb 27, 2017 at 11:24

| Show 9 more ments

3 Answers 3

Sorted by: Reset to default 2

I find assigning hostnames to development sites eases all this pain!

Simply add this to your hosts file in C:\Windows\System32\drivers\etc (remember you may need to edit the file as administrator to to that):

127.0.0.1 sitename

Then go to the directory XAMPP is installed, browse to apache\conf\extra and add the following (using your own paths) to your httpd-vhosts.conf file:

<VirtualHost *:80>
 ServerName sitename
 DocumentRoot D:\HTML\yoursite
 <Directory D:\HTML\yoursite>
 IndexOptions +FancyIndexing NameWidth=*
 Options Includes FollowSymLinks Indexes
 AllowOverride All
 Order allow,deny
 Allow from all
 Require all granted
 </Directory>
</VirtualHost>

Then you can simply browse to "http://sitename" and reference all includes from simply "/" which will then work locally and remotely without trouble.

Remember to restart Apache from the xampp control panel after you have made the edits. Also be aware you can have as many of these aliases as you like. I even install Firefox's "server switcher" extension, so I can snap backwards and forwards from local to remote on bunches of sites.

Provide a relative path to your files. Because the url is most likely "localhost".

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="/js/jquery-3.1.1.js">    </script>
<script type="text/javascript" src="/js/menu.js"></script>
</head>

If this still doesn't work make sure your javascript files are in the correct folder. With the above code i assume your javascript files are at the root of your project inside a directory called js

You dont need to add in the localhost address

src="http://127.0.0.1/js/jquery-3.1.1.js"

Instead link to your file like you have done with your css

src="../js/menu.js"

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

php - My javascript is not working in XAMPP - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)