Question

我找到的东西不仅可以打开/关闭图像，还可以将图像作为链接。

问题：它只适用于JSFiddle。

我把所有东西都放回html（提供脚本）并确保一切都是一样的......但是，在我的网站上它仍然无效。在JSFiddle上，确实如此。

如果有人有解决方案，我将非常感激。

我正在为网站使用的代码：

<center>
    <p>
       <div class="icon-container">
          <a id="TOURBUTTON">
              <img src="http://static.tumblr.com/6s0fefr/vFQn5uj2h/tournew.png" style="width: 188px; height: 188px;" />
          </a>
        </div>
    </p>
</center>   
<center>
    <p>
        <div class="display-container">
            <img id="T5" style="display:none;" a href="http://music.britrodriguez.com" src="http://static.tumblr.com/6s0fefr/GXHnabnep/tahoeshow.png"/>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                      $('#TOURBUTTON').on("click", function(){
                          $('#T5').toggle();
                      });  
                });

                $('#T5').click(function(event){
                    var link = $(this);
                    var target = link.attr("target");
                    if ($.trim(target).length > 0){
                        window.open(link.attr("href"), target);
                    } else {
                        window.location = link.attr("href");
                    }
                    event.preventDefault();
                });
            </script>
            <style type="text/css">
                .icon-container{
                    display:inline-block;
                    margin-bottom: 0px;
                    margin-top: 10px;
                }
            </style>

JSFiddle：

http://jsfiddle.net/ccymzmvn/

它没有工作的网站：

http://www.britrodriguez.com/HITEST

Answer 1

为什么用JavaScript打开网址？试试吧：

<a href="http://music.britrodriguez.com">
    <img src="http://static.tumblr.com/6s0fefr/GXHnabnep/tahoeshow.png" />
</a>

Answer 2

这些只是建议，但是：

确保您的HTML文档格式正确并删除多余的级别。 DOM树越深，越重＆＃34;越重＆＃34;该页面可以获取浏览器。始终努力实现浅层DOM树
单击＃T5时的事件处理程序并不真正需要jQuery，我已经使用了本机JS，你可以看到它有一对一的插件。
每当元素上有click事件时，请更改用户的光标，以便他们知道它是可点击的。
我还有用户不透明度来隐藏＃T5而不是显示。这样你可以很好地褪色

http://jsfiddle.net/ccymzmvn/5/

HTML

<p class="icon-container">
    <a id="TOURBUTTON">
        <img src="http://static.tumblr.com/6s0fefr/vFQn5uj2h/tournew.png" />
    </a>
</p>

<p class="display-container">
    <a href="http://music.britrodriguez.com">
        <img id="T5" src="http://static.tumblr.com/6s0fefr/GXHnabnep/tahoeshow.png" />
    </a>
</p>

CSS

body {
    text-align: center;
}

#TOURBUTTON {
    display: inline-block;
}

#TOURBUTTON img {
    cursor: pointer;
    display: block;
    width: 188px;
    height: 188px;
}

img#T5 {
    border: 1px solid red;
    max-width: 100%;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 800ms;
    transition: opacity 800ms;
}

img#T5.active {
    opacity: 1;
    pointer-events: auto;
}

的JavaScript

function open_link(event) {
    event.preventDefault();

    var link = this,
        target = link.target;

    if($.trim(target).length > 0) {
        window.open(link.href, target);
    } else {
        window.location = link.href;
    }

}


$(document).ready(function() {
    var $T5 = $('#T5');

    $('#TOURBUTTON').on("click", function(){
        $T5.toggleClass('active');
    });  

    $T5.on('click', open_link);
});

JQuery中的超链接仅适用于JSFiddle

2 个答案: