Jquery获取类名

时间:2013-03-21 04:21:58

标签: javascript jquery menu

好的,这就是我的问题。我有一个运行的php文件分别拉出我的菜单和所有内容。因此,例如加载我的Index.php加载index.php menu.php和dropdown.js文件。菜单正在运行并进行下拉菜单。我的问题是我要打电话给一类导航并列出“li> a> id”这些名称将是Home,关于我们等等....我尝试了很多不同的方式,似乎无法找出为什么我不能在jquery中找出一个简单的脚本来做到这一点。有人有什么建议吗?下面是我的菜单页面代码。

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

这是我的代码,我正在尝试做一个不起作用的警报。

//导航

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

最后找出了什么代码有效。这是我用过的其他人有这个问题。感谢大家的帮助!!!

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

}); 

3 个答案:

答案 0 :(得分:0)

您必须先阻止默认操作。试试这个:

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

答案 1 :(得分:0)

请参阅此代码并且有效:

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

答案 2 :(得分:0)

使用jQuery,您可以调用

的prop id
$("a.navigation").click(function (e) {

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

})

小提琴出错,但当你点击“主页”时,它会显示警告。这就是你想要的。 http://jsfiddle.net/djwave28/M3vdf/1/

在第二个例子中,你可以做

var lid = Array();

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

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

    })
console.log(lid);

这会将导航类元素的所有id放在盖子数组中。