javascript - 点击时获取href标签

我正在尝试获取在“导航” div中单击的元素上的href标记
无论我在导航div中单击什么元素，当前代码每次都会返回“ #BiblesandCommentaries”。

html

<div class="navigation">
        <ul>
          <li><a href="#BiblesandCommentaries">الانجيل-تعليقات</a> </li>
          <li><a href="#EnquirersLibrary">الاستفسارات</a> </li>
          <li><a href="#NewBelievers">مؤمنون جدد</a> </li>
          <li><a href="#ChristianLiving">حياة المسيحى</a> </li>
          <li><a href="#FamilyLibrary">مكتبة الأسرة</a> </li>
          <li><a href="#YoungAdultLibrary">مكتبة الشباب</a> </li>
          <li><a href="#WorshipLibrary">مزامير وتراتيل</a> </li>
          <li><a href="#BibleTeachings">التدريس</a> </li>
          <li><a href="#Leadership">القيادة</a> </li>
          <li><a href="#SchoolofChrist">مدرسة الإنجيل</a> </li>
          <li><a href="#Dota">شاگرد سازی بصورت شنیدن</a></li>
          <li><a href="#MinorityLanguages">فهم المسيح</a> </li>
        </ul>
    </div>

js

$('.navigation').click(function() {
    test = $(this).find('a').attr('href');
    alert (test);
});

最佳答案

像这样使用.find().attr()总是会得到第一个，您需要更改click函数的选择器以像a这样定位：

$('.navigation a').click(function(e) {
    e.preventDefault(); //use this if you don't want to reload the page
    var test = $(this).attr('href');
    alert (test);
});

你也应该声明你的变量。

编辑好评论者，我只是在修正他的代码，但是在这里：

$('.navigation a').on("click",function(){
       alert($(this).attr('href'));
});

编辑哈哈评论者，让我们学究：

$("div.navigation").on("click", "a", function(e) {
    e.preventDefault();
    alert ($(this).attr('href'));
});​​​​

在不阻止a标签默认操作的情况下，您将重新加载页面

编辑：想要更进一步吗？忘了jQuery。这是一些vanilla JS

document.querySelector("div.navigation").onclick = function(e){
    if(e.target.href){
        e.preventDefault();
        alert(e.target.href);
    }
}