锚标记不起作用答案

【问题标题】：Anchor tag is not working锚标记不起作用
【发布时间】：2015-03-16 05:40:17
【问题描述】：

我在列表中使用了不同的锚标记，但由于 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>

【问题讨论】：

请为此准备 jsfiddle。
如果没有看到这个 javascript 文件阻止你的锚标签工作的人无法帮助你。你能用相关的源代码或jsfiddle编辑你的问题吗？
这是我在stackO上看到的最丑陋的代码格式。如果您真的需要帮助，请提供清晰易读的材料。使用jsfiddle.net！
您需要在您的问题中提供您的完整 HTML 代码、JS 代码，指出错误发生的位置，以便其他人理解和回答。
很抱歉给您带来不便@urahara，我更新了我的问题

标签： javascript list

【解决方案1】：

如果没有看到您链接到页面的 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;

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

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

【讨论】：

【解决方案2】：

你把tag id 搞砸了：

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

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

但我仍然不清楚你想要完成什么，以及如何完成。干杯；）

【讨论】：

【解决方案3】：

我的网页也有类似的问题。我在这里发布解决方法，以防其他人正在努力解决它。

在我的情况下，我不小心从我的 javascript 代码中删除了类名，并且该函数被我页面中的每个 <a> 标记触发！！

旧的：

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

以及正确的方法：

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

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

【讨论】：