Switch div content javascript jquery

我想知道如何用js或jquery更改divs内容。。。我有一个id=“container”的div，其中包括5个不同id的div。我需要的是从id=“vapor”的第一个div开始，然后单击按钮切换到id=“baiat”的下一个div，以此类推。这是我的代码，我无法添加任何js或jquery：(

我现在有以下代码：

var image = new Array("images/baiat.png", "images/colac.png" , "images/slapi.png" , "images/umbrela.png");

var imgNumber=0; 

var numberOfImg = image.length;

function nextImage(){

    $("#container div").not("#container div:first").each(function(){

    $(this).addClass('hidden');

});

$("#click").click(function(){

    var divWithoutHiddenClass=$("#container div").not("#container div.hidden");       

   divWithoutHiddenClass.addClass('hidden');

       if(divWithoutHiddenClass.next().html()===undefined){
           $("#container div:first").removeClass('hidden');
    }
    else{
        divWithoutHiddenClass.next().removeClass('hidden');
    }
});

  if(imgNumber < numberOfImg){
    imgNumber++;
    }
  document.slideImage.src = image[imgNumber-1];

 }



if(document.images){

   var image1 = new Image();
   image1.src = "images/vapor.png";
   var image2 = new Image();
   image2.src = "images/baiat.png";
   var image3 = new Image();
   image3.src = "images/colac.png";
   var image4 = new Image();
   image4.src = "images/slapi.png";
   var image5 = new Image();
   image5.src = "images/umbrela.png";

   }  

var image=new数组（“images/baiat.png”、“images/colac.png”、“images/slapi.png”、“images/umbrela.png”）；
var imgNumber=0；
var numberOfImg=image.length；
函数nextImage（）{
$（“#container div”）。不是（“#container div:first”）。每个（函数（）{
$（this.addClass（'hidden'）；
});
$（“#单击”）。单击（函数（）{
var divWithoutHiddenClass=$（“#container div”）。不（“#container div.hidden”）；
divWithoutHiddenClass.addClass（'hidden'）；
if（divWithoutHiddenClass.next（）.html（）==未定义）{
$（“#container div:first”）.removeClass（'hidden'）；
}
否则{
divWithoutHiddenClass.next（）.removeClass（'hidden'）；
}
});
如果（imgNumber

与：

<a href="#" onClick="nextImage()"><img id="click" src="images/nextBtn.png" title="Continuare" /></a>

JS

$("#container div").not("#container div:first").each(function(){

    $(this).addClass('hidden');

});

    $("#click").click(function(){

        var divWithoutHiddenClass=$("#container div").not("#container div.hidden");       

       divWithoutHiddenClass.addClass('hidden');

           if(divWithoutHiddenClass.next().html()===undefined){
               $("#container div:first").removeClass('hidden');
        }
        else{
            divWithoutHiddenClass.next().removeClass('hidden');
        }
    });

---

在第一个按钮单击时，您希望来自baiat的所有图像都放在vapor div中？您需要什么类型的输出。您需要添加更多信息，在页面加载时，我希望所有图像都从vapor放到容器中，然后在第一个按钮单击时，我希望使用来自baiat的图像更改容器，然后单击第二个按钮，使用来自colac的图像更改容器的加载time@OzZi你的意思是动态加载内容，还是只显示和隐藏不同的div？这就是你要找的吗？我没有图像，所以有数字（div内容）。如果你能帮我的话，还有一个愿望？有一个问题…页面加载所有内容不只是第一个，就像你的小提琴一样：（我试着在这一行上做下一个按钮，而不是取消按钮method@Zword你获得了投票权，因为你编写的代码很好，但是tilda的代码很简单，并且做了我需要的事情每个函数都隐藏了所有div（除了第一个）。你添加了它吗？它不依赖于按钮。我添加了你在fiddle上写的js、css，而不是输入，我使用id=“click”在另一行代码中。on fiddle看起来很棒，next按钮工作正常，我有一个想法，可以使用contor创建一个for，使它在到达最后一个div时停止。必须在页面加载时调用nextimage（）来隐藏所有div（但首先！）。

var parentElem = $('#container');
var parentWidth=parentElem.outerWidth();

$('#left').click(function(){
    var sr=parentElem.scrollLeft();
    parentElem.scrollLeft(sr-parentWidth); 
});

$('#right').click(function(){
   var sr=parentElem.scrollLeft();
   parentElem.scrollLeft(sr+parentWidth); 
});

$("#container div").not("#container div:first").each(function(){

    $(this).addClass('hidden');

});

    $("#click").click(function(){

        var divWithoutHiddenClass=$("#container div").not("#container div.hidden");       

       divWithoutHiddenClass.addClass('hidden');

           if(divWithoutHiddenClass.next().html()===undefined){
               $("#container div:first").removeClass('hidden');
        }
        else{
            divWithoutHiddenClass.next().removeClass('hidden');
        }
    });