jquery - Jquery 打开 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滑块首先应该打开，然后如果我单击该页面滑块第二应该打开如何...我需要jquery解决方案。每页应该只有一个滑块项

Answer 1

试试这个：

$(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 2

据我了解，以下 JQ 应该对您有用...我认为您想在点击时显示图像...对吗？

你可以试试这个：

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

如果你还有什么要评论的......

Answer 3

你可以这样做

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

我为你创建了一个小提琴，点击这里。

Answer 5

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

点击

上面的代码是我的 flexslider.Slider 工作得很好，但是对于这个滑块，我需要制作底部控件来跳转特定的滑块，比如波纹管（滑块寻呼机）

<ul><li>1</li><li>2</li><li>3</li></ul>