Question

我制作了面板，但我不知道如何让它们自动切换，如果你帮助我，我将不胜感激。

JS： // akcii面板

$(".load-block:first").addClass('active');
$("#akciiContent li").click(function(event) {
    event.preventDefault();
    var elemId = $(this).attr("data-akcii");
    $("#akciiContent li").removeClass("active");
    $(".ak-block").removeClass("selected");
    $(this).addClass("active");
    $("#"+elemId).addClass("selected");
});

HTML：

<div class="row">
                    <div class="akcii-block-one">
                        <ul id="akciiContent">
                            <li data-akcii="block-three" class="load-block">
                                <p>Приведи друга</p>
                                <div class="loader"></div>
                            </li>
                            <li data-akcii="block-four" class="load-block">
                                <p>Установка центрального охранного прибора бесплатно</p>
                                <div class="loader"></div>
                            </li>
                        </ul>
                    </div>
                    <div class="akcii-block-two">
                        <div id="block-three" class="ak-block">
                            <img src="includes/icons/akcii-3.jpg">
                        </div>
                        <div id="block-four" class="ak-block">
                            <img src="includes/icons/akcii-4.jpg">
                        </div>
                    </div>
                </div>

Answer 1

HTML标记

<div class="panels">
<ul>
    <li class="active" data-panel="panel1">Tab 1</li>
    <li data-panel="panel2">Tab 2</li>
<ul>
<div id="panel1" class="panel active">Panel 1 content</div>
<div id="panel2" class="panel">Panel 2 content</div>
</div>

Jquery功能

$(document).ready(function(){
    $('.panels ul li').on('click', function(){
        if($(this).hasClass('.active')){
            //ignore if its already active
            return;
        }

        var active = $('.panels ul li.active, .panels .panel.active');
        active.removeClass('active');

        //set active tab
        $(this).addClass('active');
        //set attive panel
        $('#' + $(this).attr('data-panel')).addClass('active');
    });
});

<强> CSS

.panels .panel{
    display:none;
}

.panels .panel.active{
    display:block;
}

如何使面板自动切换

1 个答案: