锚标记不起作用

Anchor tag is not working

本文关键字：不起作用      更新时间：2023-09-26

我在列表中使用了不同的锚标签，但由于 JavaScript 文件附加到该列表，它不起作用。 当我删除该JavaScript文件时，它可以工作，但我也必须包含我的JavaScript。有没有办法使用相同的 JavaScript 文件和锚标记工作？

function prepareList() {
     $('#expList').find('li:has(ul)')
         .click(function (event) {
         if (this == event.target) {
             $(this).toggleClass('expanded');
             $(this).children('ul').toggle('medium');
         }
         return false;
     })
         .addClass('collapsed')
         .children('ul').hide();
     $('#expandList')
         .unbind('click')
         .click(function () {
         $('.collapsed').addClass('expanded');
         $('.collapsed').children().show('medium');
     })
     $('#collapseList')
         .unbind('click')
         .click(function () {
         $('.collapsed').removeClass('expanded');
         $('.collapsed').children().hide('medium');
     })
 };
 $(document).ready(function () {
     prepareList()
 });

我也附加jquery-1.4.2.min.js文件

这是我的HTML代码：

<div id="listContainer">
            <ul id="expList">
                <li>
                    <p class="exp1">INDUSTRIAL</p>
                    <ul>
                        <li>
                            <p class="exp1"><a href="fire-fighting-gallery.html">APPARELS</a></p>
                            <ul class="italic">
                                <li>
                                    <a>Coveralls</a>
                                </li>
                                <li >
                                    Uniforms
                                </li>
                                <li >
                                    <a href="fire-fighting-gallery.html">Aprons</a>
                                </li>
                                <li >
                                    Trousers
                                </li>
                                <li >
                                    Kevlar Lined Denim Jeans
                                </li>
                            </ul>
                        </li>
                        <li>
                            <p class="exp1">GLOVES</p>
                            <ul class="italic">
                            <li >Seamless</li>
                            <li>Cut & Sewn</li>
                            <li>Leather</li>
                            <li>Mechanics</li>
                            </ul>
                        </li>
                        <li>
                            SLEEVES
                        </li>
                    </ul>
                </li>

            </ul>
        </div>

如果没有看到您链接到页面的 javascript 文件，我无法告诉您锚标签不起作用的原因。

如果你在包含javascript文件之后放置它，你的链接应该正常工作。

如果在页面加载（动态数据）后创建了任何锚点，则只需调用Links();即可应用 onclick 事件处理程序，也可以在创建锚标记时手动添加addEventListener('click',Anchors,false)。

function Links(){
    //Get all Anchor elements
    var a=document.getElementsByTagName('a');
    //Loop through each anchor element found.
    for(var i=0; i<a.length; i++){
        //Set on click event for the anchor element
        a[i].addEventListener('click',Anchors,false);
    }
}
function Anchors(){
//Set new window location using the anchor href that triggers this function.
window.location.href=this.href;
}
window.onload=Links;

如果您对上述源代码有任何疑问，请在下面留下您的评论。

我希望这有所帮助。祝您编码愉快！

你搞砸了tag id ：

 $('#expList') // <-- it was #expandList
     .unbind('click')
     .click(function () {
     $('.collapsed').addClass('expanded');
     $('.collapsed').children().show('medium');
 })

在这里查看： https://jsfiddle.net/urahara/u809p5yr/

但对我来说，你想要完成什么以及如何完成仍然是模糊的。干杯;)

我的网页也有类似的问题。我在这里发布解决方法，以防其他人为此苦苦挣扎。

就我而言，我不小心从我的 javascript 代码中删除了类名，并且该函数通过我页面中的每个 <a> 标签触发！！

旧的：

 $("a").on("click", function (e) {
    // ... my function ...
});

和正确的方式：

 $(".the-classname").on("click", function (e) {
    // ... my function ...
});
<小时 />

在您的情况下，我认为return false阻止标签工作。继续删除它并检查它是否正常工作。

相关文章：