3

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

下面的作品，但意识到它并不漂亮。什么是更好的方法来做到这一点，而不使用内联 javascript？

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

谢谢！

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

5 回答 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单击图像的功能，但您必须防止在anchor功能内部使用单击行为return false：

带有可点击图像的 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
于 2012-05-21T21:55:19.740 回答
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 小提琴演示。

针对 OP 的评论进行了编辑，如下：

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

有点，是的。但是假设您想要的只是打开一个新窗口以响应单击（并从a该窗口打开该窗口），然后只需使用：hrefawindow.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 小提琴演示。

编辑以稍微改进脚本，根据 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 小提琴演示。

参考：

于 2012-05-21T21:45:41.647 回答
0

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

并定义函数

<script>

function hideMeShowNext( element )
{

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

}

</script>
于 2012-05-21T21:22:38.147 回答
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>​​​​​​​​​​​​​​​​​​​​
于 2012-05-21T21:38:45.393 回答
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>
于 2013-03-26T12:01:07.103 回答