JQuery中的超链接仅在JSFiddle中有效

Question

I found something that can not only toggle on/off an image, but also make that image a link.

Problem: It only works in JSFiddle.

I put everything back into html (providing script) and made sure that everything was the same...but still, on my site it won't work. On JSFiddle, it does.

If anyone has a solution, I'd be most grateful.

The code I'm using for the site:

<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>

The JSFiddle:

http://jsfiddle.net/ccymzmvn/

The site it's not working on:

http://www.britrodriguez.com/HITEST

Answer 1

Why do you open the url with JavaScript? Just try:

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

Answer 2

These are just suggestions, but:

1. Make sure your HTML document is well formed and remove extraneous levels. The deeper the DOM tree goes, the "heavier" the page can get for the browser. Always strive towards a shallow DOM tree
2. The event handler when you click #T5 doesn't really need jQuery, I've used native JS, you can see it has a one to one drop-in.
3. Whenever you have a click event on an element, change the cursor for the user so they know it is clickable.
4. I have also user opacity to hide the #T5 instead of display. That way you can make it fade nicely

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);
});