logo标签列表

隐藏一个div，显示另一个div...然后在鼠标单击时隐藏，显示另一个div

javascriptjquery
3
我想让一个div在点击其中的图片后隐藏，然后显示下一个div。再次点击时，隐藏该div并加载下一个div等等。以下代码可以实现，但并不美观。有没有更好的方法来完成这个功能，且不使用内联javascript？我还想添加一个“下一页”按钮，以便用户可以隐藏当前div并显示下一个div...这样用户就可以在不点击div中的的情况下加载下一项。谢谢！
function replace( hide, show ) {
  document.getElementById(hide).style.display="none";
  document.getElementById(show).style.display="block";
}

身体...

<div id = "div1" style="display:block" onclick = "replace('div1','div2')"><a href="link1.html" target="_blank"><img src="images/a.jpg"></a></div>
<div id = "div2" style="display:none" onclick = "replace('div2','div3')"><a href="link2.html" target="_blank"><img src="images/b.jpg"></a></div>
<div id = "div3" style="display:none" onclick = "replace('div3','div4')"><a href="link3.html" target="_blank"><img src="images/c.jpg"></a></div>
<div id = "div3" style="display:none" onclick = "replace('div4','div5')"><a href="link4.html" target="_blank"><img src="images/.jpg"></a></div>
...
你可以在jQuery中使用toggle()函数，它可以显示隐藏的元素并隐藏可见的元素。 - Hunter McMillen
但是，如果您希望在单击后使图像执行“前进”，那么为什么要将它们包装在可链接到其他页面的a元素中，并使用target="_blank"？ - Roko C. Buljan
5个回答
2

演示 jsBin

如果你希望图片在点击后进行“进阶”操作，那么为什么要将它们包裹在可链接到另一个页面的 a 元素中，并使用 target="_blank" ？

与此同时，这是简化后的 HTML 代码：

<div id="gallery">  
  <a href="link1.html" target="_blank"><img src="img1.jpg"></a>
  <a href="link2.html" target="_blank"><img src="img2.jpg"></a>
  <a href="link3.html" target="_blank"><img src="img3.jpg"></a>
  <a href="link4.html" target="_blank"><img src="img4.jpg"></a>  
</div>

...还有这几行jQ / javascript代码：

var i = 0;                       // set desired starting one // zero based                         
var N = $('#gallery >*').length; // get number of childrens

function advance(){
    $('#gallery >*').hide().eq(i++%N).show();
}
advance();

$('#next').click( advance );

使用此脚本，您可以轻松地通过单击图像触发 advance 函数，但在函数内部使用 return false 防止 anchor 的单击行为：

点击图像的 jsBin 演示

var i = 0;                            
var N = $('#gallery >*').length;

function advance(){
  $('#gallery >*').hide().eq(i++%N).show();
  return false;   // remove that line to make the gallery advance but the same time go to the desired link-page
}
advance();

$('#next, #gallery >*').click( advance ); // comma separate the elements that will trigger the function

如果您想要更“花哨”的效果，可以参考以下代码:

jsBin演示淡入淡出效果

代码如下:

var i = 0;                            
var N = $('#gallery >*').length;

$('#gallery >*').hide().eq(i++%N).show(); // the initial adjustment (on DOM ready)

function advance(){
  $('#gallery >*').stop().fadeTo(900,0).eq(i++%N).stop().fadeTo(900,1);
}

$('#next, #gallery >*').click( advance );    // trigger the fade advance/effect function
谢谢，这几乎就是我要找的。所以当用户点击图像并打开新窗口时，我希望图像可以自动切换到下一个。这样当他们回到父窗口时，它已经为他们提前了。明白我的意思吗？ - rivitzs
@user1373779 我添加了另一个演示，你看到了吗？现在你也可以点击图片。 （或者我没有理解你的评论...） - Roko C. Buljan
再次感谢！通过您的第二个演示，我正在尝试使图像在单击图像时前进（就像您所做的那样），但也要遵循a href target="_blank"，以便它打开一个新窗口并转到一个URL（例如google.com）。 - rivitzs
如果你想实现这个功能，只需删除 return false; 这一行代码。这样就可以跳转到所需页面，并使画廊自动切换到下一张图片。 - Roko C. Buljan
非常好，谢谢！有没有办法让“下一个”按钮只在最后一个div之前起作用，然后使用window.location重定向？ - rivitzs
1
我建议，考虑到jQuery似乎是一个选项：
$('div').not(':first').hide();
$('div a').click(
    function(e){
        e.preventDefault();
        var that = $(this).closest('div'),
            duration = 1200;
        if (that.next('div').length){
            that.fadeOut(duration,
                         function(){
                             that.next('div').fadeIn(duration);
                         });
        }
    });​​​​​​​​​​​

JS Fiddle演示。

根据下面OP的评论进行编辑：

有没有办法使点击图像时a href target=_blank起作用？

有点类似，是的。但是假设你只想要在点击后打开一个新窗口（并且将该的href链接到该窗口），那么只需使用window.open()即可：

$('div').not(':first').hide();
$('div a').click(
    function(e){
        e.preventDefault();
        var newWin = window.open(this.href,'newWindow'),
            that = $(this).closest('div'),
            duration = 1200;
        if (that.next('div').length){
            that.fadeOut(duration,
                         function(){
                             that.next('div').fadeIn(duration);
                         });
        }
    });​

JS Fiddle演示

编辑一下脚本，根据Roko的评论稍作改进（我最初误解了他的意思，但现在假设他是指从最后一个图像移动到第一个图像，而不仅仅是失败/停止）：

$('div').not(':first').hide();
$('div a').click(
    function(e){
        e.preventDefault();        
        var newWin = window.open(this.href,'newWin'),
            that = $(this).closest('div'),
            duration = 1200;
        if (that.next('div').length){
            that.fadeOut(duration,
                         function(){
                             that.next('div').fadeIn(duration);
                         });
        }
        else {
            that.fadeOut(duration,
                         function(){
                             that.prevAll('div:last').fadeIn(duration);
                         });
        }
    });​

JS Fiddle演示。

参考资料：

嗯...？我真的不知道我是漏掉了什么批评，还是只是没有理解你的评论。我做了什么丑陋的事情吗？ - David Thomas
我喜欢这个，谢谢。有没有办法使点击图像时 a href target=_blank 起作用？ - rivitzs
@David 不要啊，代码真的很好，我刚刚创建了一个演示fiddle，惊讶地发现一个循环（是的，在问题中没有提到）“失踪”了...只是因为我想给你点赞。 - Roko C. Buljan
@Roko：同意！我简直不敢相信我没想到那个...谢谢！=） - David Thomas
@DavidThomas 谢谢您的回复。有没有办法集成一个“下一张”按钮，以便在不点击图像的情况下跳转到下一张图片（就像Roko的脚本一样）？此外，是否有任何方法使最后一个div img在鼠标单击时重定向window.location到不同的URL，同时仍然利用window.open到a href位置？谢谢！ - rivitzs
0
给所有的div添加一个onclick="hideMeShowNext(this)"，
并定义这个函数。
<script>

function hideMeShowNext( element )
{

element.style.display = 'none'
element.nextSibling.style.display = 'block'

}

</script>
0

你是否希望链接能够正常工作，然后在新页面上显示所选图像？

如果不是：

var elems = $('div[id^="div"]');
elems.not(':first').hide();

elems.on('click', function(e) {
    e.preventDefault();
    elems.hide();
    $(this).next().show();
});

HTML

<div id="div1"><a href="link1.html" target="_blank"><img src="images/a.jpg"></a></div>
<div id="div2"><a href="link2.html" target="_blank"><img src="images/b.jpg"></a></div>
<div id="div3"><a href="link3.html" target="_blank"><img src="images/c.jpg"></a></div>
<div id="div4"><a href="link4.html" target="_blank"><img src="images/.jpg"></a></div>​​​​​​​​​​​​​​​​​​​​
0

此外，您可以同时使用两个函数

<script>
function hideMeShowNext( element )
{
element.style.display = 'none'
element.nextSibling.style.display = 'block'
}
</script>

then render this anywhere in your page//you can change <A> to <Div>
<a href="" onclick="hideMeShowNext('first');hideMeShowNext('second');">Click Me</a>

如果它不起作用，那么使用

。
<script type="text/javascript">
function myfnction() {
hideMeShowNext('first');
hideMeShowNext('second');
}
</script>

<a href="" onclick="myfunction();"> blabla </a>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接