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

Question

我试图隐藏一个 div，然后在单击 div 中的图像时显示下一个 div。再次单击时，隐藏该 div 并加载下一个，等等。

下面的工作，但意识到它并不漂亮。在不使用内联 javascript 的情况下执行此操作的更好方法是什么？

我还尝试添加一个“下一步”按钮，该按钮将隐藏 div 并显示下一次潜水...因此用户无需单击 a href 即可加载下一个项目分区

谢谢!

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

Answer 1

demo jsBin

但是，如果您希望图像在点击后执行“前进”，那么为什么您将它们包裹在一个 a 元素中，该元素可使用 target="链接到其他页面_空白” ?

同时这是简化的 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 内部使用来防止 anchor 单击行为错误:

jsBin demo with clickable images

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 demo with fade effect

代码:

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