jquery - Jquery open div onclick下部ボタン

Question

<div id="Slider-First Slider-Common">

    <div class="Slider-Item Slider-First">
        <img src="img/pet1.jpg"/>
    </div>
    <div class="Slider-Item Slider-Second">
        <img src="img/pet2.jpg"/>
    </div>

</div>

<div class="Bottom-Button">

<a href="">Click</a>

</div>

ここで私は上記のようにしています... onclik スライダーが最初に開き、そのページをクリックすると、スライダーが2番目にどのように開くか...これにはjqueryソリューションが必要です。ページごとに 1 つのスライダー項目のみが存在する必要があります

Answer 1

このようにできます

HTML

<div id="Slider-First Slider-Common">

    <div class="Slider-Item Slider-First">
        <img src="img/pet1.jpg"/>
    </div>
    <div class="Slider-Item Slider-Second">
        <img src="img/pet2.jpg"/>
    </div>

</div>

<div class="Bottom-Button">

<a href="#" class="click_me">Click</a>

</div>

Jquery部分

$(document).ready(function(){
 $(".Slider-Item Slider-First").hide();
 $(".Slider-Item Slider-Second").hide();
 $(".click_me").click(function(){
  $(".Slider-Item Slider-First").show(); 
 });
 $(".Slider-Item Slider-First").click(function(){
  $(".Slider-Item Slider-Second").show(); 
 });
});

お役に立てれば

Answer 2

これを試して：

$(document).ready(function() {
    $('[id="Slider-First Slider-Common"]').hide();

    $(".Bottom-Button a").click(function() {
        $('[id="Slider-First Slider-Common"]').show(); 
        return false;
    });
});

PS要素にはスペースを使用しないでくださいid。

編集質問をもう一度読んでください。いくつかの修正が必要になります。

$('.Slider-Item').hide();


$('.Bottom-Button a').on('click',function(){
    $(this).hide();
    $('.Slider-First').show();
    return false;
});

$('.Slider-First').on('click',function(){
    $('.Slider-First').hide();
    $('.Slider-Second').show();
    return false;
});

さらに編集

$('.Slider-Item').hide();


$('.Bottom-Button a').on('click',function(){
    $(this).hide();
    $('.Slider-First').show();
    return false;
});

$('.Slider-Item').on('click',function(){
    if ($(this).next().length > 0) {
        $(this).hide();
        $(this).next().show();
    }

    return false;
});

フィドル: http://jsfiddle.net/9p9sg/

Answer 3

私が理解したように、次のJQはあなたのために働くはずです...クリック時に画像を表示したいと思います...そうですか??

あなたはこれを試すことができます：

$('.Slider-Item').on('click',function(){
 $('.Slider-Item:visible').slideUp(200);
 $(this).slideDown(200);
});

他に何かあればコメントください。...

Answer 4

ここに参照があります。これらのテキストを に置き換えるだけで、このコードを自由に更新して<img src="...."/>ください。

CSS:

#slider{list-style-type:none}
.slider-item{display:none;}
.slider-show{display:block;}

html:

<ul id="slider">
    <li class="slider-item">a</li>
    <li class="slider-item">b</li>
    <li class="slider-item">c</li>
    <li class="slider-item">d</li>
    <li class="slider-item slider-show">e</li>
</ul>
<a href="">Click</a>

jquery:

$('a').click(function(){
    var indexLength = $('.slider-item').length-1;
    var currentIndex = $('.slider-item:visible').index();
    var log = $('#log');
    $('.slider-item:visible').hide();    
    if(currentIndex<indexLength){         
         currentIndex = currentIndex + 1;
    }
    else{
        currentIndex = currentIndex - indexLength;        
    }
    log.append(currentIndex);
    $('.slider-item:eq('+currentIndex+')').show();
    return false;
});

私はあなたのためにフィドルを作成しました。ここをクリックしてください。