Question

我创建了一个页面，允许我访问很多很好的网站，所以我不必输入所有链接。

我想在我的网站www.x3mismusic.eu上使用此页面获取所有歌曲的索引，但由于没有主页按钮的位置，我想将整页可点击作为链接。我这样做是为了每当你使用shift + x链接时都会被禁用，这样你就可以点击按钮了。然而，即使我在背景上放置一个链接，它也没有显示它，它也不起作用。

我试图在身体周围放置一个链接（锚标签），用链接创建第二个包裹，我甚至试图在身体中使用JavaScript“onclick”标签，但这并不像我想要的那样工作，因为onclick让我无法使用我创建的按钮链接。

我在网上浏览了很长时间，但找不到任何原因或解决方案，说明链接无效的原因。有人可以帮助我将背景可点击作为链接，同时仍能激活按钮链接吗？

我不擅长在这里格式化代码，所以我将有一个jsfiddle链接到代码。这是链接：

http://jsfiddle.net/e5fm5byn/

<a href="http://jsfiddle.net/e5fm5byn/" target="_blank">because it asked me 
to input code</a>

Answer 1

他在那里你不应该有多个id具有相同的值现在回答你的问题

<html>
<head>
    <style type="text/css">
        .disableMenu {
            pointer-events:none;
        }
        .x {
            background-color:#000;
            color:#600;
            padding-left:50px;
            padding-right:50px;
            padding-top:5px;
            padding-bottom:5px;
            border:3px solid #600;
            text-align:center;
            float:left;
        }
        .x:hover {
            background-color:#000;
            color:#0a0;
            padding-left:50px;
            padding-right:50px;
            padding-top:5px;
            padding-bottom:5px;
            border:3px solid #0a0;
            text-align:center;
            float:left;
        }
        a {
            color:#fff;
            text-decoration:none;
        }
        a:hover {
            color:#b89200;
            text-decoration:none;
        }
        body {
            background:linear-gradient(to bottom right, #123264, #606);
            color:#b89200;
            width:100%;
            height:100%;
            position:absolute;
            margin:0;
            padding:0;
        }
        #wrapper {
            width:100%;
            height:100%;
            position:absolute;
            left:0%;
            top:0%;
            margin:0;
            padding:0;
        }
        #wrapper2 {
            width:100%;
            height:100%;
            position:absolute;
            left:0%;
            top:0%;
            margin:0;
            padding:0;
        }
    </style>
</head>
<body onkeypress="IEKeyCap()" onclick="myClickEvent(this)">
    <div id="wrapper"> 
        <span class="x">
            <b>
                youtubeX
            </b>
        </span>
        </a> 
        <a href="http://www.lunagang.nl" target="_blank" title="lunagang">
            <span class="x">
                <b>
                    lunagang
                </b>
            </span>
        </a>
        <a href="http://www.facebook.com" target="_blank" title="facebook">
            <span class="x">
                <b>
                    facebook
                </b>
            </span>
        </a>
        <a href="http://46.21.172.161:2222/CMD_LOGIN" target="_blank" title="direct                   admin">
            <span class="x">
                <b>
                    direct admin
                </b>
            </span>
        </a>

        <a href="http://46.21.172.161/squirrelmail/src/login.php" target="_blank" title="squirrelmail">
            <span class="x">
                <b>
                    squirrelmail
                </b>
            </span>
        </a>

        <a href="http://www.runescape.com" target="_blank" title="runescape">
            <span class="x">
                <b>
                    runescape
                </b>
            </span>
        </a>

        <a href="http://www.google.com" target="_blank" title="google">
            <span class="x">
                <b>
                    google
                </b>
            </span>
        </a>

        <a href="http://www.x3mismusic.eu" target="_blank" title="x3mis music">
            <span class="x">
                <b>
                    x3mis music
                </b>
            </span>
        </a>

        <a href="http://www.game-vortex.eu" target="_blank" title="game-vortex">
            <span class="x">
                <b>
                    game-vortex
                </b>
            </span>
        </a>

        <a href="http://www.outlook.com" target="_blank" title="outlook">
            <span class="x">
                <b>
                    outlook
                </b>
            </span>
        </a>
    </div>
</body>
<script type="text/javascript">
    function NNKeyCap(thisOne) {
     if (thisOne.modifiers & Event.SHIFT_MASK) {
         if (thisOne.which == 88) {
             var x = document.querySelectorAll(".x");
             x.forEach(function(element){
                element.classList.add("disableMenu");
             });                     
         }
     }
    }

    function IEKeyCap() {
     if (window.event.shiftKey) {
         if (window.event.keyCode == 88) {
             var x = document.querySelector("#wrapper");
             x.classList.add("disableMenu");
         }
     }
    }

    if (navigator.appName == 'Netscape') {
     window.captureEvents(Event.KEYPRESS);
     window.onKeyPress = NNKeyCap;
    }

    function myFunction() {
        var x = document.querySelector("#wrapper");
        x.classList.remove("disableMenu");
    }

    function myClickEvent(body)
    {
        var childDiv = body.querySelector('#wrapper');
        var hasClass = childDiv.classList.contains('disableMenu');
        if(hasClass)
        {
            document.location = 'http://www.google.com'; <!-- your background link here -->
        }
    }
</script>
</html>

此处我删除了正文标记中的onkeyup="myFunction()"，因为它删除了由disableMenu添加的IEKeyCap类

并添加myClickEvent，检查#wrapper是否有disableMenu类如果它有disableMenu，则会将其重定向到您分配给document.location的链接

希望这有助于你

如何添加整页大小的后台链接？

1 个答案: