打开多个框进行“交互式教程”
opening multiple of boxes for an "interactive tutorial"
在
标题中很难解释这一点，但我想做的是制作"交互式"教程，用户单击他想要清洁或清洁的区域或产品，然后弹出另一个包含信息的框，当该部分完成后，您继续使用另一个框，依此类推......所以我最终得到了一个接一个的 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>希望你们理解我在这里试图实现的目标，我不太确定我是否解释得足够好，但如果没有，实时网站应该能够让你理解。
您不必在此处特别提及所有类来隐藏。您可以使用所有元素通用的类，例如.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);
}
见小提琴
相关文章：
- Webpack/Rect:遵循egghead.io教程，但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- RubyonRails——构建交互式接口应该朝哪个方向发展
- 如何使用angularjs构建交互式滚动着陆页
- 寻找一个免费的交互式美国地图与突出显示的州
- GM_xmlhttprequest问题&某个地方的教程
- AngularJS-简单的教程不起作用
- Raphael.js条形图及教程
- 使用bokeh/flexx-pyscript在Python 3.5中绘制交互式浏览器
- 带有数据输入的PHP/JavaScript web交互式图谱
- 如何制作交互式网站并允许用户编辑网站内容
- 在KML图标中包含交互式HTML5
- html5视频交互式视频播放器
- 创建交互式菜单
- 画布粒子交互式图像
- JavaScript:编写了一个CodeCademy教程
- 禁用与只读不适用于非交互式但值保持器输入
- 一个用javascript创建非常基本的模拟的教程
- 交互式图表(通过 dc.js）未正确相互更新
- 交互式信息窗口谷歌地图V3
- 打开多个框进行“交互式教程”
