Question

我正在尝试使用div自动隐藏并显示其他div，如更换器。当我在主div中使用multi div时它不起作用：

<div id="div1">

实际发生的是它隐藏了内部div的所有内容有没有办法保留我的div以保存我的风格并为我的div做一个自动更换器？

html代码

<div id='container'>
    <div id='div1' class='display' style="background-color: red;"> 
        <div id="mydiv" style=" left:200; width:100; background-color:#F605C6;">
            <div id="main_adv" class="a" style="position:absolute;text-align:left;width:673px;height:256px">
                <div id="Layer3" class="a" style="position:absolute;text-align:left;left:176px;top:56px;width:490px;height:171px" title=""></div>
                <div id="img_adv" class="a" style="position:absolute;text-align:left;left:4px;top:55px;width:169px;height:172px;" title="">
                    <img id="ri" class="a" src="thumbs/img1.png" />
                </div>
                <div id="title_adv" class="a" style="position:absolute;text-align:right;left:4px;top:6px;width:662px;height:40px;" title="">
                    <div style="position:absolute;text-align:right;right:6px;top:4px;">
                        <span style="color:#000000;font-family:Arial;font-size:29px;right:5px">some text</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id='div2' class='display' style="background-color: green;"> 
    div2
</div>

<div id='div3' class='display' style="background-color: blue;"> 
    div3
</div>
</div>
</body>

Javascript代码

$('html').addClass('js');

$(function() {
    var timer = setInterval( showDiv, 400);
    var counter = 0;

    function showDiv() {
        if (counter == 0) { counter++; return; }

        $('div','#container')
            .stop()
            .hide()
            .filter( function() { return this.id.match('div' + counter); })   
            .show('fast');

        counter == 16? counter = 0 : counter++; 
    }
});

Answer 1

我写了一些基本的代码，像你问的那样不断改变div：

jsfiddle.net/5jhuK/

HTML

<div id='container'>
    <div id='div1' class='display' style="background-color: red;">div1</div>
    <div id='div2' class='display' style="background-color: green;">div2</div>
    <div id='div3' class='display' style="background-color: blue;">div3</div>
</div>

CSS

.display {
    display: none;
}

JS（jQuery）

$(document).ready(function () {

    var activeDiv = 1;
    showDiv(activeDiv); // show first one because all are hidden by default
    var timer = setInterval(changeDiv, 2000);

    function changeDiv() {
        activeDiv++;
        if (activeDiv == 4) {
            activeDiv = 1;
        }
        showDiv(activeDiv);
    }

    function showDiv(num) {
        $('div.display').hide(); // hide all
        $('#div' + num).fadeIn(); // show active
    }

});

这真的不复杂，下次你问一些简洁的东西并删除不必要的代码（比如#mydiv）

Answer 2

一些事情： 1. html id是唯一的，所以你可以做下面的事情： 2.您的代码在查找中缺少＃（例如“#div”+计数器） 3.你可以使用子选择器“＆gt;”只将目标div降低一级

var counter=1;
function showDiv() {


    $('#container > div').hide()
    $("#div"+counter).show();

    counter == 3? counter = 1 : counter++; 

  }

自动更改div jquery

2 个答案: