jQuery获取类名

Question

Ok so heres my problem. I have a php file running that pulls my menu in separately and all the content as well. So for example loading my Index.php loads index.php menu.php and a dropdown.js file. The menu is working and does a drop down. My problem is I want to call a class of navigation and list the "li > a > id" names which will be Home, about us, etc.... I tried a ton of different ways and can't seem to figure out why I can't just figure out a simple script to do this in jquery. Anyone have any suggestions? Below is my code for the menu page.

<div id="nav" class="nav">
  <ul id="sddm">
  <li><a class="navigation" id="Home" href="index.php" onMouseOver="mopen('m1')" onMouseOut="mclosetime()">Home</a>
  <div id="m1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li><a class="navigation" href="station_history.php" onMouseOver="mopen('m2')" onMouseOut="mclosetime()">Station History</a>
  <div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="Apparatus.php" onMouseOver="mopen('m3')" onMouseOut="mclosetime()">Apparatus</a>
  <div id="m3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  <a class="navigation" href="truck_history.php">Truck History</a> 
  </div>
  </li>
  <li>
  <a class="navigation" href="photos.php" onMouseOver="mopen('m4')" onMouseOut="mclosetime()">Photos</a>
  <div id="m4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="news_events.php" onMouseOver="mopen('m5')" onMouseOut="mclosetime()">News & Events</a>
  <div id="m5" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="Station_members.php" onMouseOver="mopen('m6')" onMouseOut="mclosetime()">Station Members</a>
  <div id="m6" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="education.php" onMouseOver="mopen('m7')" onMouseOut="mclosetime()">Education</a>
  <div id="m7" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  <a class="navigation" href="SiteID">Station Tours</a>
  <a class="navigation" href="SiteID">Fire Extinguisher</a>
  <a class="navigation" href="SiteID">First Aid & CPR</a>
  <a class="navigation" href="SiteID">Smoke Alarms</a> 
  </div>
  </li>
  <li>
  <a class="navigation" href="SiteID" onMouseOver="mopen('m8')" onMouseOut="mclosetime()">Contact Us</a>
  <div id="m8" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> </div>
  </li>
  </ul>
  </div>
  </div>

Here is my code that I was trying to do just for an alert which would not work.

//navigation

$("a.navigation").click(function () {
    alert("hello"); 
}); 

---

Finally figured out what code worked. Here it is what I used in case anyone else has this problem. Thanks to everyone that helped!!!

//navigation 
$(document).ready(function() {
    $("a.navigation").click(function () {
        alert("hello"); 
    })

}); 

Answer 1

You are going to have to prevent the default action first. Try this:

$("a.navigation").click(function (event) {
    event.preventDefault();
    alert("hello"); 
}); 

Answer 2

Please see this code and it works :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="nav" class="nav">
  <ul id="sddm">
  <li><a class="navigation" id="Home" href="index.php" onMouseOver="mopen('m1')" onMouseOut="mclosetime()">Home</a>
  <div id="m1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li><a class="navigation" href="station_history.php" onMouseOver="mopen('m2')" onMouseOut="mclosetime()">Station History</a>
  <div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="Apparatus.php" onMouseOver="mopen('m3')" onMouseOut="mclosetime()">Apparatus</a>
  <div id="m3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  <a class="navigation" href="truck_history.php">Truck History</a> 
  </div>
  </li>
  <li>
  <a class="navigation" href="photos.php" onMouseOver="mopen('m4')" onMouseOut="mclosetime()">Photos</a>
  <div id="m4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="news_events.php" onMouseOver="mopen('m5')" onMouseOut="mclosetime()">News & Events</a>
  <div id="m5" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="Station_members.php" onMouseOver="mopen('m6')" onMouseOut="mclosetime()">Station Members</a>
  <div id="m6" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="education.php" onMouseOver="mopen('m7')" onMouseOut="mclosetime()">Education</a>
  <div id="m7" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  <a class="navigation" href="SiteID">Station Tours</a>
  <a class="navigation" href="SiteID">Fire Extinguisher</a>
  <a class="navigation" href="SiteID">First Aid & CPR</a>
  <a class="navigation" href="SiteID">Smoke Alarms</a> 
  </div>
  </li>
  <li>
  <a class="navigation" href="SiteID" onMouseOver="mopen('m8')" onMouseOut="mclosetime()">Contact Us</a>
  <div id="m8" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> </div>
  </li>
  </ul>
  </div>
  </div>


  <script type="text/javascript">

    $(function(){
        $("a.navigation").click(function () {
                    event.preventDefault();
            alert("hello"); 
        }); 
    });

  </script>

Answer 3

With jQuery you can call the prop id of the

$("a.navigation").click(function (e) {

    alert($(this).prop("id"));

})

The fiddle goes in error, but when you click "home" it does show you the alert. That is what you want I think. http://jsfiddle.net/djwave28/M3vdf/1/

In second instance you can do

var lid = Array();

 $("a.navigation").each(function (e) {

        lid.push($(this).prop("id"));

    })
console.log(lid);

This will put all the id's of the navigation class elements in the lid array.