Question

我创建了一个Fadein / Fadeout滑块。左按钮和右按钮工作正常，但我想通过单击选项卡按钮来播放滑块。 JSfiddle

HTML

    <p id="slide1_controls">
        <div class="block-icon icon-s1">
             <img class="block-img icon-s1" src="../_images/building_icon1.png" data-hover-image="../_images/building_icon1_hover.png" data-selected="false" />
        </div>
        <div class="block-icon icon-s2">
             <img class="block-img icon-s2" src="../_images/building_icon2.png" data-hover-image="../_images/building_icon2_hover.png" data-selected="false" />
        </div>
        <div class="block-icon icon-s3">
             <img class="block-img icon-s3" src="../_images/building_icon3.png" data-hover-image="../_images/building_icon3_hover.png" data-selected="false" />
        </div>
        <div class="block-icon icon-s4">
             <img class="block-img icon-s4" src="../_images/building_icon4.png" data-hover-image="../_images/building_icon4_hover.png" data-selected="false" />
        </div>
    </p>
    <div class="slider-text-context" id="target">
         <div class="slide-01 fade-texts active">tab1</div>
         <div class="slide-02 fade-texts">tab2</div>
         <div class="slide-03 fade-texts">tab3</div>
         <div class="slide-04 fade-texts">tab4</div>
    </div>

CSS

    .fade-texts {
        width: 100%;
        height: 259px;
        left: 0px;
        position: absolute;
    }
    .slider-btn-area {
        position: absolute;
        z-index: 8;
        margin-left: auto;
        margin-right: auto;
        left: 25%;
        top: 54%;
        width: 50%;

    }
    #target > div {
      display:none;   
    }

    #target div:nth-child(1) {
      display:block;   
    }

    .tab-area {
        position: absolute;
        left: 25%;
        top: 30%;
    }

的Javascript

$(".icon-s2").click(function() {
    activeElem = $("#target .slide-02"); 
    activeElem.removeClass('active').fadeOut(0);
    if (!activeElem.is(':first-child')) {
         activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
    }
}                        
$(".icon-s3").click(function() {
    activeElem = $("#target .slide-03"); 
    activeElem.removeClass('active').fadeOut(0);
    if (!activeElem.is(':first-child')) {
        activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
    }
}

当我按下标签时，它无法尝试显示DIV。

Answer 1

你的代码毫无意义。它看起来的方式是必须点击图像才能fadeIn/Out标签。我认为应该是另一种方式。我清理了标记，简化了类，ID，样式等......

这是 DEMO

<强> HTML

<div id="slides">
    <div id="slide1" class="slide active">
        <img class="img" src="http://placehold.it/150x50/000/Fff.png&text=FIRST" />
    </div>
    <div id="slide2" class="slide">
        <img class="img" src="http://placehold.it/150X50/048/Fee.png&text=SECOND" />
    </div>
    <div id="slide3" class="slide">
        <img class="img" src="http://placehold.it/150X50/fa8/375.png&text=THIRD" />
    </div>
    <div id="slide4" class="slide">
        <img class="img" src="http://placehold.it/150X50/9a7/a10.png&text=FOURTH" />
    </div>
</div>
<div class="tab-area" id="controls">
    <div id="tab1" class="tab">1</div>
    <div id="tab2" class="tab">2</div>
    <div id="tab3" class="tab">3</div>
    <div id="tab4" class="tab">4</div>
</div>

<强> CSS

.slide {

    display:none;

}

.active {

    display: block;

}

.tab {

    width: 16px;

    height: 16px;

    display: inline-block;

    margin: 0 10px;

    outline: 1px solid black;

    text-align: center;

    cursor: pointer;

}

<强>的jQuery / JavaScript的

$(function () {

    $('.tab').on('click', function (event) {
        var tabID = event.target.id;
        //console.log('tabID: '+tabID);
        var order = tabID.split('b').pop();
        //console.log('order: '+order);
        var pos = parseInt(order, 10);
        var slideID = 'slide'+pos;
        //console.log('slideID: '+slideID);
        var act = document.getElementById(slideID);
        //console.log('act: '+act.id);
        $('.slide').fadeOut(0).removeClass('active');
        $(act).addClass('active').fadeIn(750);
    });
});

在标签按钮上播放fadein / fadeout滑块点击

1 个答案: