【问题标题】:selecting anchor elements with specific class选择具有特定类的锚元素
【发布时间】:2013-05-09 08:23:06
【问题描述】:

我想使用 javascript 选择启用菜单的锚点,这是一个小图像,当我单击它时,它应该更改背景类以突出显示菜单。 更改类有效,我尝试了 document.onclick 并且它有效,但是当我尝试启用特定的 wrapper>nav> a.menu 时,它不会选择它。 我试过了:

var menu = document.getElementById('nav'); 
var anchor = menu.getElementsByTagName('a');

能够点击每个链接只是为了测试,但它没有工作。

我试过了:

var anchor = menu.getElementsByClassName('menu-enabled');

然后

anchor.onclick...` but still no result :(

尝试使用 jquery
$("a.menu-enabled").onclick = function() 但还是没有结果

当前设置为单击文档上的任意位置,直到我完成为止。

    <script>
    document.onclick = function() {
    $(".overlay").toggleClass("overlay-show");
    } 
    </script>


<div id="wrapper">
        <div class="logo">
                <a href="index.html">Tro</a>
            </div>
        <nav id="nav" class="menu-icon">
                <a class="menu-enabled">&nbsp;</a>
                <a class="link-enabled" target="_blank">&nbsp;</a>
                <a class="prev-disabled">&nbsp;</a>
                <a class="next-disabled">&nbsp;</a>
                <a class="back-disabled">&nbsp;</a>
            </nav>
            <div class="overlay">
        <nav class="meniu">
                <a href="#1">Link 1</a>
                <a href="#2">Link 2</a>
                <a href="#3">Link 3/a>
                <a href="#4">Link 4</a>
            </nav>

编辑1:小提琴http://jsfiddle.net/bFXZj/

编辑 2:好的,我认为问题是我无法单击按钮,在其他东西上尝试过它并且它有效,我认为 z-index 是问题,很快就会返回答案。

编辑3:可能是因为我给锚定了背景?

nav.menu-icon a.menu-enabled{
    background: url(http://www.xxx.xx/menu.png) no-repeat 0 0;
    background-size: 24px 24px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    visibility: visible;
    z-index: 99;
}

【问题讨论】:

  • 请创建小提琴..?
  • 阅读NodeNodeListjQuery events;了解差异。然后再试一次,看看你能不能让它工作。

标签: javascript jquery class selector


【解决方案1】:

试试

$(document).ready(function(){
    $(document).on('click', 'a.menu-enabled', function(e){
        // Do something
    });
});

【讨论】:

    【解决方案2】:

    jQuery 版本是这样的:

    $(document).ready(function(){
        $('a.menu-enabled').click(function(e){
            // Do something
        });
    });
    

    而不是$("a.menu-enabled").onclick = function()

    编辑:

    更新了你的 jsFiddle,它可以工作了:http://jsfiddle.net/bFXZj/1/

    【讨论】:

    • 尝试确保不仅链接的 z-index,而且其祖先的 z-index 高于任何同级。您可以选择链接中的文字吗?
    • 您是否在控制台中收到任何 javascript 错误?它可能与 css 相关,但似乎不太可能,因为选择文本证明点击甚至击中了该元素。
    • 好的,它现在可以工作了,必须清除缓存并添加一些 z-index 行。全部
    猜你喜欢
    • 2011-07-01
    • 1970-01-01
    • 2018-05-19
    • 1970-01-01
    • 1970-01-01
    • 2011-11-29
    • 1970-01-01
    • 2010-11-27
    相关资源
    最近更新 更多