Javascript Div交换点击

Javascript Div Swap on Click

本文关键字：交换 Div Javascript      更新时间：2023-09-26

所以我有一些工作的JS代码在我的网站上的div交换到另一个div一旦链接被点击。然而，我目前有它的工作顶部的iframe通过覆盖一个清晰的gif这是链接，它的工作完美。

现在我想把它应用到一个按钮，这是按在我们的网站上创建一个下载-我不能使用相同的不可见的gif技巧，因为按钮有鼠标过的效果，然后不工作，所以我希望它发生一些其他的方式，当点击按钮。当前正在工作的函数在头文件中被加载为…

function yourFunction(){
    document.getElementById('yourfirDiv').style.display='block';
    document.getElementById('yoursecDiv').style.display='none';
}

目前触发这个链接的是一个完美的图像，看起来如下…

<a href="javascript:void(0)" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://url.com/locker.js?guid=0512eafd69b18d22');document.body.appendChild(fileref); setTimeout(yourFunction, 3000);"> 
    <img src="http://url.com/blank.gif" style="position: absolute; z-index: 500; width: 100%; max-width: 100%; height: 280px; "> 
</a>

现在我需要应用这个来对这个按钮做同样的事情…

<div id="yoursecDiv" style="display:block;">
    <div id="downloadmp3">
        <div class="download_button_div">
            <form action="/download_file.php" method="post" name="downloadform">
                <input name="file_name" value="<?php echo $fname; ?>" type="hidden">
                <input name="bucket" value="<?php echo $bucket; ?>" type="hidden">
                <button type='submit' class='download_button' title="Click to Download Mixtape!">Download</button>
            </form>
        </div>
    </div>
</div>

有人给了我一些简单的JS，如下所示，这应该触发当一个div名称被点击触发的功能，交换命名的div，但它不工作，代码片段是…

$("#clickablediv").bind("click",function(){
    yourFunction();
});

为了使事情稍微复杂一点，页面是一个浮动页面与ajax启动，所以像上面的任何代码都必须在网站的JS文件的部分加载页面，如果它需要加载一个投资组合的启动。在上面的链接的情况下，函数代码加载在全局站点头很好，内联JS工作得很好-也许有一种方法将该链接应用到我的按钮div，简单的输入非常欢迎!

我认为isherwood是对的，你把事情弄得太复杂了。

但是，试试这个:

$(document).ready(function() {
    $(document).on("click","#clickablediv",function(){
        $('#yourfirDiv').show();
        $('#yoursecDiv').hide();
    });
});

假设#yourfirDiv的样式或类css为"display:none"。

然后你可以从div中删除那些讨厌的onclick属性。

相关文章：