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

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

转载作者：行者123 更新时间：2023-11-28 00:44:17

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

$('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 - Angular 图像拖动并调整大小

文章推荐： javascript - 弹出关闭不起作用有太多递归 jquery 错误

文章推荐： javascript - 菜单加载速度不够快 - 如何优化？

css - flex 盒子模型 - 显示 : flex, 盒子， flex 盒子？
这个问题在这里已经有了答案: CSS3 Flexbox: display: box vs. flexbox vs. flex (3 个答案) 关闭 1 年前。今天我们中的许多人都知道 displa
Jquery super 盒子
$('.finalLink').html(" Click to Follow"); 我正在尝试创建一个以 super 框模式打开的链接。尝试了灯箱，结果相同。这些链接有效，但只是转到该网站。如果我静态
java - 盒子 2d 环境光如何工作？
我使用了 RayHandler.useDiffuseLight(true) ，现在无论我设置什么环境光值，屏幕上未照亮的部分都是黑色的。这是正常的吗？我见过其他用 libgdx 制作的应用程序，它同时
java - 堆叠方 block /盒子
我需要帮助解决一个简单的问题。我的任务即将结束，我们要制作不同的艺术人物。我制作了一个“正方形内的正方形”盒子，需要生成该盒子的 4 行和 4 列。我认为最好的解决方案是多一些 for 循环，但不能
jquery - 如何以这种方式 float 盒子？
我怎样才能实现this effect使用 CSS 和/或 jQuery？我会发布到目前为止我编写的代码，但它没有用...... 最佳答案使用jQuery Masonry或Isotope为了达成这个
python - 漂亮的打印(二维阵列，盒子)
我写了下面的代码: for row in range(len(listOfLists)): print('+' + '-+'*len(listOfLists)) print('|',
html - 底部和顶部 Angular 盒子
我想知道如何在 CSS3 中制作成 Angular 盒子。喜欢这个网站: http://themeluxe.com/themes/glissando/ (白人) 我怎样才能使边框看起来更好、更平滑。
css - 垂直居中的嵌套 flex 盒子
我正在尝试实现具有三个垂直部分的简单布局: 页面顶部的小标题。主要内容，必要时展开，以便页脚保留在页面底部。页面底部的页脚。主要内容部分应进一步分为两部分:一个带有输入框和按钮的非常小的表单，以
css - 盒子 Bootstrap 中的网格
我正在尝试构建如下图所示的网格 IMG 链接:http://postimg.org/image/qo3b4nof1/ 但我得到的 DIV E 几乎在 D-DIV 旁边这是我的代码
jquery - 定位 fancybox 盒子？
如何修改fancybox盒子的定位？我希望它被定位，以便它漂浮在我的容器 div 中... 感谢您的宝贵时间和帮助! 最佳答案 jquery.fancybox-1.2.6 的第 255 行有这段代码
CSS:如何在里面圆 Angular 盒子？
这个问题在这里已经有了答案: Inset border-radius with CSS3 (8 个答案) 关闭 9 年前。 border-radius 属性可以使盒子的 Angular 变圆。但是如
css - flex 盒子。元素未在同一高度对齐
我创建了一个包装器元素，其中包含 2 个彼此相邻的行内 block 框(图片中为浅绿色和黄色)。然后我创建了另外两个 div，它们都嵌套在其中一个内联 block 中以使内容居中。它可以工作，但由于某
盒子内的 CSS WordPress 盒子
我在使用 WordPress 时遇到问题，在盒子中嵌套盒子。在 WordPress 之外，这工作正常。我确定只有一两个参数有误。外框为dp23，内框为dp22由于某种原因，内框 (dp22) 之间存
html - 调整 flex 盒子
我目前尝试在容器内排列盒子的结果是这样的输出。但我想要实现的是，用最大数量的框填充每一行，但每个框都有固定的填充和边距。我相信我已经做到了。我需要每行中的单个框来覆盖剩余空间，间隙仅为 1 像素
html - 居中 Flex 盒子
我在下面有多个 flexbox 的代码。当页面展开时，我如何将它们垂直居中放置在页面中？我尝试在我的 flex-container 中使用 justify-content: center; 但当我使用
html - 如何使用 flex 盒子？
我有这样的布局: 我
html - 如何安装 flex 盒子？
我是编程新手，我注意到有人提到了 flex box。在阅读了很多相关内容之后，它似乎对我有用。唯一的问题是我在安装它时遇到了很多麻烦，即使在搜索了大约一个小时的帮助之后也是如此。我从 github 下
ubuntu - Ansible 无法提供 Vagrant 盒子
Vagrantfile有问题: # -*- mode: ruby -*- # vi: set ft=ruby : Vagrant.configure("2") do |config| config
Vagrant 盒子 : alternative download links
我正在尝试下载一个 Vagrant 的盒子，但他们的服务器此时非常缓慢。他们有公共(public)镜子吗？我想下载precision64.box 文件。谢谢最佳答案尝试更可靠的: Vagrant
javascript - 渲染底部div后如何让顶部div填充剩余高度？ (没有 flex 盒子)
在一个父容器内，三个 div 彼此重叠。顶部 div 是固定高度。底部 div 的内容占用了未知数量的垂直空间，但需要显示其中的所有内容。顶部 div 应填充剩余的垂直空间。每一个 // 100%

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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