javascript - hide div, show another... then hide, show another on mouse click - Stack Overflow

admin管理员组

文章数量:1389768

I'm trying to have a div hide and then show the next div when the image in the div is clicked. When it is clicked again, hide that div and load the next one, etc.

The below works, but realize it's not pretty. What's the better way to do this, and without using inline javascript?

I'm also trying to add a "next" button that will hide the div and show the next dive... so the user can load the next item without clicking the a href in the div.

Thanks!

function replace( hide, show ) {
  document.getElementById(hide).style.display="none";
  document.getElementById(show).style.display="block";
}

Body...

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

I'm trying to have a div hide and then show the next div when the image in the div is clicked. When it is clicked again, hide that div and load the next one, etc.

The below works, but realize it's not pretty. What's the better way to do this, and without using inline javascript?

I'm also trying to add a "next" button that will hide the div and show the next dive... so the user can load the next item without clicking the a href in the div.

Thanks!

function replace( hide, show ) {
  document.getElementById(hide).style.display="none";
  document.getElementById(show).style.display="block";
}

Body...

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

• javascript
• jquery

Share Improve this question Follow edited May 21, 2012 at 21:25 rivitzs asked May 21, 2012 at 21:16 rivitzsrivitzs 49933 gold badges1010 silver badges2323 bronze badges 2

• You could use the toggle() function in jQuery, it will show hidden elements and hide visible ones. – Hunter McMillen Commented May 21, 2012 at 21:20
• But if you want the images to perform an 'advance' after a click, than why you have them wrapped inside an a element that is linkable to an other page using target="_blank" ? – Roko C. Buljan Commented May 21, 2012 at 21:51

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

demo jsBin

But if you want the images to perform an 'advance' after a click, than why you have them wrapped inside an a element that is linkable to an other page using target="_blank" ?

In the meanwhile here is the simplified 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>

...and this couple of jQ/javascript lines:

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

---

Using this script you can easily trigger the advance function clicking your images too, but than you have to prevent the anchor click behavior using inside the function 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 ); // ma separate the elements that will trigger the function

---

If you want a more 'fancy' effect here you go:

jsBin demo with fade effect

The code:

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

I'd suggest, given that jQuery appears to be an option:

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

---

Edited in response to ment from OP, below:

Anyway to do this so when you click the image the a href target=_blank works?

Sort of, yes. But assuming that all you want is for a new window to open up in response to clicking the a (and to open that window to the href from that a), then simply use 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 demo.

---

Edited to improve the script a little, as per Roko's ment that a 'loop would be nice' (which I misunderstood initially, but now assume that he meant to move from the last image to the first, rather than simply failing/stopping):

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

References:

• fadeIn().
• fadeOut.
• :first selector.
• hide().
• :last selector.
• next().
• not().
• prevAll().
• window.open().

give all your divs an onclick="hideMeShowNext(this)"

and define the function

<script>

function hideMeShowNext( element )
{

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

}

</script>

Do you somehow expect the links to work, and then on the new page show the selected image?

If not :

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

also, you can use two functions at the same time

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

if it doesnt work, then use

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

<a href="" onclick="myfunction();"> blabla </a>

本文标签：