Question

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

以下作品，但意识到它并不漂亮。有什么更好的方法，而且不使用内联javascript？

我还试图添加一个“下一个”按钮，隐藏div并显示下一个潜水...所以用户可以加载下一个项目，而无需单击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="_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功能，但您必须使用功能anchor内部阻止return false点击行为：

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

Answer 2

我建议，鉴于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 demo

已编辑以回应OP的评论，如下所示：

无论如何要这样做，所以单击图像时，href target = _blank有效吗？

排序，是的。但假设您只需要打开一个新窗口以响应点击a（并从该href打开该a窗口），那么只需使用{ {1}}：

window.open()

JS Fiddle demo

编辑稍微改进脚本，根据Roko的评论“循环会很好”（我最初误解了，但现在假设他的意思是从最后一张图片移到首先，而不是简单地失败/停止）：

$('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 demo

参考文献：

Answer 3

给你所有的div onclick="hideMeShowNext(this)"

并定义函数

<script>

function hideMeShowNext( element )
{

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

}

</script>

Answer 4

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

如果不是：

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>

Answer 5

另外，您可以同时使用两个功能

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

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

5 个答案:

demo jsBin

jsBin demo with clickable images

jsBin demo with fade effect