在标题中很难解释这一点，但我想做的是制作“交互式”教程，用户点击他想要清理或清理的区域或产品，然后另一个框弹出信息，当这部分完成后，你继续使用另一个盒子等等......所以我最终得到了7-8个盒子，以及30个产品和30个（områder）区域我的编码方式它会非常混乱，因为我编码像“box1，box2”等，只是没有让它与css / javascript / jquery中的一个盒子引用一起工作，我不知道这是否可能，或者某种阵列可能有用吗？
我实际上在做的是创建一个包含每次点击信息的新框，从而删除其他“主标题”框。
你可以在这里查看： http://www.premiere-produkter.no/pp/metode/index.php
Javascript和HTML代码：
$(".text2,text3,text4,text5,text6,text7,text8,text9,text10,text11,text12").hide(500);
$(".text22,text23,text24,text25,text26,text27,text28,text29,text210,text211,text212").hide(500);
$(document).ready(function(){
$('.box').click (function(){
$(".text").toggle(500);
$(".text").animate({margin: "0px 4px"}, 500);
//$( "div:not(:contains('box'))" ).toggle(500);
$(".box1,.box2").hide(500);
});
$("#neste1").click (function()
{
$(".text2").animate({margin: "0px 4px"}, 500);
$(".text2").show(500);
});
$("#neste2").click (function()
{
$(".text3").show(500);
$(".text3").animate({margin: "0px 4px"}, 500);
});
$("#neste3").click (function()
{
$(".text4").show(500);
$(".text4").animate({margin: "0px 4px"}, 500);
});
$("#neste4").click (function()
{
$(".text5").show(500);
$(".text5").animate({margin: "0px 4px"}, 500);
});
$("#neste5").click (function()
{
$(".text6").show(500);
$(".text6").animate({margin: "0px 4px"}, 500);
});
$("#neste6").click (function()
{
$(".text7").show(500);
$(".text7").animate({margin: "0px 4px"}, 500);
});
$("#neste7").click (function()
{
$(".text8").show(500);
$(".text8").animate({margin: "0px 4px"}, 500);
});
$('.box2').click (function(){
$(".text22").toggle(500);
$(".text22").animate({margin: "0px 4px"}, 500);
//$( "div:not(:contains('box'))" ).toggle(500);
$(".box,.box1").hide(500);
});
$("#neste21").click (function()
{
$(".text22").animate({margin: "0px 4px"}, 500);
$(".text22").show(500);
});
$("#neste22").click (function()
{
$(".text23").show(500);
$(".text23").animate({margin: "0px 4px"}, 500);
});
$("#neste23").click (function()
{
$(".text24").show(500);
$(".text24").animate({margin: "0px 4px"}, 500);
});
$("#neste24").click (function()
{
$(".text25").show(500);
$(".text25").animate({margin: "0px 4px"}, 500);
});
$("#neste25").click (function()
{
$(".text26").show(500);
$(".text26").animate({margin: "0px 4px"}, 500);
});
$("#neste26").click (function()
{
$(".text27").show(500);
$(".text27").animate({margin: "0px 4px"}, 500);
});
$("#neste27").click (function()
{
$(".text28").show(500);
$(".text28").animate({margin: "0px 4px"}, 500);
});
$(".arbflat").click (function()
{
$(".box2,.text11").show(500);
$(".box,.text,.text2,.text3,.text4,.text5,.text6,.text7,.text8").hide(500);
});
$("#produkter").click(function(){
$("#list").show(500);
$("#list2").hide(500);
});
$("#omrader").click(function(){
$("#list2").show(500);
$("#list").hide(500);
});
$("#begge").click(function(){
$("#list2").show(500);
$("#list").show(500);
});
});
<script language="JavaScript" type="text/javascript">
function openPopUP() {
window.open('http://www.premiere-produkter.no/datablad/11034.pdf','NewWin',
'toolbar=no,status=no,width=600,height=800') }
function open11034() {
window.open('http://www.premiere-produkter.no/main.aspx?page=article&artno=11034','NewWin',
'toolbar=no,status=no,width=800,height=800') }
function opensolchart11034() {
window.open('img/solutionchart11034.pdf','NewWin',
'toolbar=no,status=no,width=800,height=800') }
function opengummihansker() {
window.open('http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=5065&gidlevel=0','NewWin',
'toolbar=no,status=no,width=800,height=800') }
function opengummihansker() {
window.open('http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=5063&gidlevel=0','NewWin',
'toolbar=no,status=no,width=800,height=800') }
function openPopUP2() {
window.open('https://www.youtube.com/watch?v=Knf9YQeNVl4;autoplay=1','NewWin',
'toolbar=no,status=no,width=550,height=550') }
function openflaske() {
window.open('http://www.premiere-produkter.no/main.aspx?page=articlelist&requery=1&searchstr=b%C3%B8tte&searchfld=','NewWin',
'toolbar=no,status=no,width=550,height=550') }
function openbøtte() {
window.open('http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0','NewWin',
'toolbar=no,status=no,width=550,height=550') }
function opendoseringbøtte() {
window.open('http://www.premiere-produkter.no/main.aspx?page=articlelist&requery=1&searchstr=b%C3%B8tte%20dispenser&searchfld=','NewWin',
'toolbar=no,status=no,width=550,height=550') }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrap">
<h4><img src="img/PremiereProdukter_logoSMALL.png"></h4>
<h5>Interaktive rengjøringsprosedyrer</h5>
<h1 id="header"><!--searchbar--></h1>
<div id="buttons">
<h3 id="produkter">Produkter</h3>
<h3 id="omrader">Områder</h3>
<h3 id="begge">Begge</h3>
</div>
<!--Produkter -->
<ul id="list">
<h3>PRODUKTER</h3>
<li class="box" data-goto="default">
<a href="#"><img src="img/11034.jpg"><h2>CaterClean</h2></a>
</li>
<div class="text">
<h6> Produkt informasjon</h6>
<p style="display:block; width:100%; background:#FFF; color:#000; font-weight:bold;"><b><a style="color:#000;" href="#" onclick="open11034();"> For mer informasjon om produktet trykk her</b></a></p>
<p><button id="neste1">Fortsett</button></p>
</div>
<div class="text2">
<h6> Helse,miljø og sikkerhet:</h6>
<p>Før vi går videre anbefaler vi deg å lese igjennom HMS datablad på dette produktet</p>
<p>Punkt 4: Førstehjelpstiltak<br />
Punkt 5: Brannsikrings tiltak<br />
Punkt 7: Håndtering og lagring<br />
Punkt 8: Personlig vernebeskyttelse</p>
<p style="text-decoration:underline;"><a href="#" onclick="openPopUP();"> Last ned / se igjennom databladet her </a></p>
<p><button id="neste2">Fortsett</button></p>
<!-- <p><button id="neste2">Desinfisering</button></p> -->
</div>
<div class="text3">
<h6>Arbeidstøy og verneutstyr:</h6>
<p>Anbefalt verneutstyr ut i fra HMS datablad:</p>
<a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=5065&gidlevel=0">Gummihansker: </a><br />
<a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=5063&gidlevel=0">Engangshansker: </a><br />
<a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&requery=1&searchstr=vernebrille&searchfld=">Vernebriller: </a> </p>
<p><button id="neste3">Neste Boks</button></p>
</div>
<div class="text4">
<h6>Rengjøringsoppgave</h6>
<p>Under velger du type renhold du skal utføre i henhold til området produktet skal brukes på.</p>
Spray rengjøring: <b>1:50</b></a><br />
Generell overflate rengjøring: <b>1:50</b></a><br />
Frityr koker: <b>1:20</b></a><br />
Mopping: <b>1:50</b></a><Br />
Grovrengjøring: <b>1:10</b></a><BR />
<p><button id="neste4">Neste Boks</button></p>
</div>
<div class="text5">
<h6>Flaske eller bøtte </h6>
<p> Velg hvilken flaske/bøtte du skal blande renholdsproduktet i:</p>
<p style="text-decoration:underline; cursor:pointer; text-align:left;"><a href="#" onclick="openflaske();">Flaske:</a><br />
<a onclick="openbøtte();" href="#"> Bøtte: </a><br />
<a onclick="opendoseringbøtte();" href="#"> Doseringspumper: </a></p>
<p><button id="neste5">Neste Boks</button></p>
</div>
<div class="text6">
<h6>Dosering </h6>
<p>Hvordan dosere rett blandings forhold trykk på bilder under</p>
<p style="text-decoration:underline;"><a href="#" onclick="opensolchart11034();"> <img src="img/doschart.jpg"> </a></p>
<p><button id="neste6">Neste Boks</button></p>
</div>
<div class="text7">
<h6>Teknisk Informasjon</h6>
<p> Her kan du laste ned teknisk informasjon om produktet:</p>
<p>Caterclean 50: <a href="http://www.premiereproducts.co.uk/downloads/TIS/Caterclean%2050%20TIS.pdf" target="_blank"> Se her </a></p>
<p><button id="neste7">Neste Boks</button></p>
</div>
<div class="text8">
<h6>Områder </h6>
<p> Her er ulike områder som kan passe med dette produktet:</p>
<p>Arbeidsflater: <a href="#"> <div class="arbflat"> Trykk her</div> </a></p>
<p>Spisebord: <a href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0"> Se her </a></p>
<p>Kjøkken: <a href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0"> Se her </a></p>
<p><button id="neste8">Neste Boks</button></p>
</div>
</ul>
<!--OMRÅDER-->
<ul id="list2">
<h3>OMRÅDER</h3>
<li class="box2">
<a href="#/australia/"><img src="img/flater.jpg"><h2>Arbeidsflater</h2></a>
</div>
<div class="text22">
<h6> Metoder for å rengjøre:</h6>
<p>1. </p>
<p>Punkt 4: Førstehjelpstiltak<br />
Punkt 5: Brannsikrings tiltak<br />
Punkt 7: Håndtering og lagring<br />
Punkt 8: Personlig vernebeskyttelse</p>
<p style="text2-decoration:underline;"><a href="#" onclick="openPopUP();"> Last ned / se igjennom databladet her </a></p>
<p><button id="neste22">Fortsett</button></p>
<!-- <p><button id="neste22">Desinfisering</button></p> -->
</div>
<div class="text23">
<h6>Arbeidstøy og verneutstyr:</h6>
<p>Anbefalt verneutstyr ut i fra HMS datablad:</p>
Gummihansker: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=5065&gidlevel=0"> Se her </a><br />
Engangshansker: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=5063&gidlevel=0"> Se her </a><br />
Vernebriller: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&requery=1&searchstr=vernebrille&searchfld="> Se her </a> </p>
<p><button id="neste23">Neste Boks</button></p>
</div>
<div class="text24">
<p><h6>Rengjøringsoppgave</h6></p>
<p>Under velger du type renhold du skal utføre i henhold til området produktet skal brukes på.</p>
Spray rengjøring: <b>1:50</b><br />
Generell overflate rengjøring: <b>1:50</b><br />
Frityr koker: <b>1:20</b><br />
Mopping: <b>1:50</b><Br />
Grovrengjøring: <b>1:10</b><BR />
<p><button id="neste24">Neste Boks</button></p>
</div>
<div class="text25">
<p><h6>Flaske eller bøtte </h6></p>
<p> Velg hvilken flaske/bøtte du skal blande renholdsproduktet i:</p>
<p>Flaske: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&requery=1&searchstr=b%C3%B8tte&searchfld=" target="_blank"> Se her </a><br />
Bøtte: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0"> Se her </a><br />
Doseringspumper: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0"> Se her </a></p>
<p><button id="neste25">Neste Boks</button></p>
</div>
<div class="text26">
<p><h6>Dosering </h6></p>
<p>Hvordan dosere rett blandings forhold trykk på bilder under</p>
<p style="text2-decoration:underline;"><a href="#" onclick="opensolchart11034();"> <img src="img/doschart.jpg"> </a></p>
<p><button id="neste26">Neste Boks</button></p>
</div>
<div class="text27">
<p><h6>Teknisk Informasjon</h6></p>
<p> Her kan du laste ned teknisk informasjon om produktet:</p>
<p>Caterclean 50: <a style="text-align:right; text-decoration:underline;" href="http://www.premiereproducts.co.uk/downloads/TIS/Caterclean%2050%20TIS.pdf" target="_blank"> Se her </a></p>
<p><button id="neste27">Neste Boks</button></p>
</div>
<div class="text28">
<p><h6>Områder </h6></p>
<p> Her er ulike områder som kan passe med dette produktet:</p>
<p>Arbeidsflater: <a style="text-align:right; text-decoration:underline;" href="#"> <div class="arbflat"> Trykk her</div> </a></p>
<p>Spisebord: <a style="text-align:right; text-decoration:underline;" href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0"> Se her </a></p>
<p>Kjøkken: <a href="http://www.premiere-produkter.no/main.aspx?page=articlelist&gid=2214&gidlevel=0"> Se her </a></p>
<p><button id="neste28">Neste Boks</button></p>
</div>
</li>
</ul>
</div>
</body>
希望你们明白我试图在这里实现的目标，我不太确定我是否能够解释得足够好但是现场网站应该能让你理解，如果没有。
答案 0 :(得分：1)
您无需在此专门提及隐藏的所有课程。您可以使用所有元素共同的类.text-hidden，并在CSS中添加此代码
.text-hidden {
display: none;
}
现在所有的框都被隐藏了，你可以拥有动画的功能，而不是每次重复动画代码，你传递需要动画的元素。我已经为每个名为data-next的按钮添加了一个数据属性，该按钮将在单击时显示框名称。
HTML
<button id="neste2" data-next="text3">Fortsett</button>
JS
$('button').on('click', function(){
var str = $(this).data('next'); // on click get the value from data-next of the clicked button
animateBox($('.'+str)) // pass this value to the custom function
});
function animateBox(obj) {
var $obj = obj;
$obj.animate({
margin: "0px 4px"
}, 500);
$obj.show(500);
}