javascript - 打开多个盒子以获取 "interactive tutorial"

标签 javascript jquery html interactive box

在标题中解释这一点有点困难，但我想做的是制作“交互式”教程，用户单击他想要清洁或清洁的区域或产品，然后弹出另一个框提供信息，当该部分完成后，您继续使用另一个盒子，依此类推...所以我最终得到了一个接一个的 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);   
}

See Fiddle

关于javascript - 打开多个盒子以获取 "interactive tutorial"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27566755/

上一篇：javascript - 菜单加载速度不够快 - 如何优化？

下一篇：javascript - 弹出关闭不起作用有太多递归 jquery 错误

相关文章：

python - 错误 404 - 使样式表在 Bottle 中工作(Python Web 框架)

javascript - SharePoint 返回顶部 : not able to add class on page scroll

javascript - 按属性分组对象

javascript - Jquery .ajax 未按预期工作

javascript - 如何使用 Jquery 从另一个文本框和 radio 中的值更新 'total' 文本框

html - 叠加层上的 CSS 文本

javascript - 如何删除最后出现的匹配项？

javascript - 使用 JavaScript 在 Canvas 上一次又一次地写入文本

javascript - 3 秒后隐藏加载图标，当我们点击一​​个链接 <a

asp.net - 如何让 Asp.net MVC BeginForm 正确添加结束标记？

©2024 IT工具网  联系我们