iframe没有显示其内容

时间：2018-03-05 08:28:22

标签： javascript html css iframe

我已经为每个下拉列表创建了一个iframe。 所以这里是html，css和JS：

＆＃13;
＆＃13; 
$(function(){
  $('#klanten-lijst').on('change',function(){
    $('#klanten div').hide();
    $('.klant-'+this.value).show();
  });
});
＆＃13; 
.styled-select {
   background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
   height: 45px;
   overflow: hidden;
   width: 500px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 16px;
   height: 45px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 520px;
}

.styled-select.slate {
   background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
   height: 45px;
   width: 500px;
}

.styled-select.slate select {
   border: 1px solid #ccc;
   font-size: 16px;
   height: 45px;
   width: 520px;
}
＆＃13; 
<div>
	<h2 style="margin: 0 0 0px 20px">Klanten</h2>
	<div class="styled-select slate" style="position:fixed;margin-left:20px;">
	  <select name="klanten" id="klanten-lijst">
	    <option>Klanten<option>
		<option value="1">7LAB LLP</option>
		<option value="2">A.Tuin Den Helder B.V.</option>
		<option id="option3" value="3">Ace Accounting</option>
		<option id="option4" value="4">Administratiekantoor A.C. Koenen</option>
		<option id="option5" value="5">Advocatenkantoor Roos</option>
		<option id="option6" value="6">Afix</option>
		<option id="option7" value="7">Agratechniek</option>
		<option id="option8" value="8">Anne van Dalen</option>
		<option id="option9" value="9">App-vise</option>
		<option id="option10" value="10">Arlette Hazevoet</option>
		<option id="option11" value="11">Asko Schoonmaak- en Bedrijfsdiensten B.V.</option>
		<option id="option12" value="12">ATAL B.V.</option>
		<option id="option13" value="13">Australian Backpackers B.V.</option>
		<option id="option14" value="14">Blommestein Gevelonderhoud</option>
		<option id="option15" value="15">Blooming bedrijvengroep B.V.</option>
		<option id="option16" value="16">Borst Bedden B.V.</option>
		<option id="option17" value="17">Bouwbedrijf J. Nat. & Zn. B.V.</option>
		<option id="option18" value="18">BouwBoxr B.V.</option>
		<option id="option19" value="19">Broersma & De Boer Bouwadviesgroep B.V.</option>
		<option id="option20" value="20">Bruin Assurantiën</option>
		<option id="option21" value="21">Bureau Gras</option>
		<option id="option22" value="22">Bureau4 V.O.F. </option>
		<option id="option23" value="23">Business Center Bonne Chance B.V.</option>
		<option id="option24" value="24">C.B.M. Poland</option>
		<option id="option25" value="25">CaseWare Nederland B.V.</option>
		<option id="option26" value="26">ColorCrew</option>
		<option value="27">Coos</option>
		<option value="28">Coperatieve Dienstverlening Heerhugowaard U.A.</option>
		<option value="29"></option>
		<option value="30"></option>
		<option value="31"></option>
		<option value="32"></option>
		<option value="33"></option>
	  </select>
	  
	<div id="klanten">
		<div class="klant-1" hidden>
			<iframe src="../klanten/7LAB LLP.html" style="height:410px;width:1880px;"></iframe>
		</div>
		<div class="klant-2" hidden>
			<iframe src="../paginas/home.html" style="height:410px;width:1880px;"></iframe>
		</div>
	</div>
	
	<script src="../scripts/klant-reveal.js"></script>
	
	</div>
</div>
＆＃13;
＆＃13;
＆＃13;

我不明白为什么它不起作用，我现在已经在脑海中打破了一段时间。

它很有趣，因为当我改变＆＃34;隐藏＆＃34;手工制作＆＃34;显示＆＃34;在网站上的F12中，它确实用鼠标显示框架，但不显示内容本身。 所以我不知道哪里可能出错！

提前致谢， 罗埃尔

2 个答案:

答案 0 :(得分：0)

您不会将jquery库导入到html中，'$'无法执行任何操作。

$(function(){
  $('#klanten-lijst').on('change',function(){
    //$('#klanten div').hide();
    //$('.klant-'+this.value).show();
  });
});
.styled-select {
   background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
   height: 45px;
   overflow: hidden;
   width: 500px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 16px;
   height: 45px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 520px;
}

.styled-select.slate {
   background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
   height: 45px;
   width: 500px;
}

.styled-select.slate select {
   border: 1px solid #ccc;
   font-size: 16px;
   height: 45px;
   width: 520px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div>
	<h2 style="margin: 0 0 0px 20px">Klanten</h2>
	<div class="styled-select slate" style="position:fixed;margin-left:20px;">
	  <select name="klanten" id="klanten-lijst">
	    <option>Klanten<option>
		<option value="1">7LAB LLP</option>
		<option value="2">A.Tuin Den Helder B.V.</option>
		<option id="option3" value="3">Ace Accounting</option>
		<option id="option4" value="4">Administratiekantoor A.C. Koenen</option>
		<option id="option5" value="5">Advocatenkantoor Roos</option>
		<option id="option6" value="6">Afix</option>
		<option id="option7" value="7">Agratechniek</option>
		<option id="option8" value="8">Anne van Dalen</option>
		<option id="option9" value="9">App-vise</option>
		<option id="option10" value="10">Arlette Hazevoet</option>
		<option id="option11" value="11">Asko Schoonmaak- en Bedrijfsdiensten B.V.</option>
		<option id="option12" value="12">ATAL B.V.</option>
		<option id="option13" value="13">Australian Backpackers B.V.</option>
		<option id="option14" value="14">Blommestein Gevelonderhoud</option>
		<option id="option15" value="15">Blooming bedrijvengroep B.V.</option>
		<option id="option16" value="16">Borst Bedden B.V.</option>
		<option id="option17" value="17">Bouwbedrijf J. Nat. & Zn. B.V.</option>
		<option id="option18" value="18">BouwBoxr B.V.</option>
		<option id="option19" value="19">Broersma & De Boer Bouwadviesgroep B.V.</option>
		<option id="option20" value="20">Bruin Assurantiën</option>
		<option id="option21" value="21">Bureau Gras</option>
		<option id="option22" value="22">Bureau4 V.O.F. </option>
		<option id="option23" value="23">Business Center Bonne Chance B.V.</option>
		<option id="option24" value="24">C.B.M. Poland</option>
		<option id="option25" value="25">CaseWare Nederland B.V.</option>
		<option id="option26" value="26">ColorCrew</option>
		<option value="27">Coos</option>
		<option value="28">Coperatieve Dienstverlening Heerhugowaard U.A.</option>
		<option value="29"></option>
		<option value="30"></option>
		<option value="31"></option>
		<option value="32"></option>
		<option value="33"></option>
	  </select>
	  
	<div id="klanten">
		<div class="klant-1" hidden>
			<iframe src="../klanten/7LAB LLP.html" style="height:410px;width:1880px;"></iframe>
		</div>
		<div class="klant-2" hidden>
			<iframe src="../paginas/home.html" style="height:410px;width:1880px;"></iframe>
		</div>
	</div>
	
	<script src="../scripts/klant-reveal.js"></script>
	
	</div>
</div>

答案 1 :(得分：0)

不要使用隐藏属性，如果是，请尝试删除该属性。 JQuery .show（）根据使用的元素将css显示更改为block或inline-block。 所以，使用jQuery或者从元素中删除隐藏属性 不要使用隐藏属性而是在css中的所有元素上显示：none，因此它将被隐藏直到选择完成。选择时，使用jquery.show（）

供参考：

＆＃13;
＆＃13; 
$(function() {
  $('#klanten-lijst').on('change', function() {
    $('#klanten div').hide();
    $('.klant-' + this.value).show();
  });
});
＆＃13; 
.styled-select {
  background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
  height: 45px;
  overflow: hidden;
  width: 500px;
}

.styled-select select {
  background: transparent;
  border: none;
  font-size: 16px;
  height: 45px;
  padding: 5px;
  /* If you add too much padding here, the options won't show in IE */
  width: 520px;
}

.styled-select.slate {
  background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
  height: 45px;
  width: 500px;
}

.styled-select.slate select {
  border: 1px solid #ccc;
  font-size: 16px;
  height: 45px;
  width: 520px;
}

#klanten {
  margin-top: 50px;
}

#klanten div {
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h2 style="margin: 0 0 0px 20px">Klanten</h2>
  <div class="styled-select slate" style="position:fixed;margin-left:20px;">
    <select name="klanten" id="klanten-lijst">
    <option>Klanten</option>
		<option value="1">7LAB LLP</option>
		<option value="2">A.Tuin Den Helder B.V.</option>
		<option id="option3" value="3">Ace Accounting</option>
		<option id="option4" value="4">Administratiekantoor A.C. Koenen</option>
		<option id="option5" value="5">Advocatenkantoor Roos</option>
		<option id="option6" value="6">Afix</option>
		<option id="option7" value="7">Agratechniek</option>
		<option id="option8" value="8">Anne van Dalen</option>
		<option id="option9" value="9">App-vise</option>
		<option id="option10" value="10">Arlette Hazevoet</option>
		<option id="option11" value="11">Asko Schoonmaak- en Bedrijfsdiensten B.V.</option>
		<option id="option12" value="12">ATAL B.V.</option>
		<option id="option13" value="13">Australian Backpackers B.V.</option>
		<option id="option14" value="14">Blommestein Gevelonderhoud</option>
		<option id="option15" value="15">Blooming bedrijvengroep B.V.</option>
		<option id="option16" value="16">Borst Bedden B.V.</option>
		<option id="option17" value="17">Bouwbedrijf J. Nat. & Zn. B.V.</option>
		<option id="option18" value="18">BouwBoxr B.V.</option>
		<option id="option19" value="19">Broersma & De Boer Bouwadviesgroep B.V.</option>
		<option id="option20" value="20">Bruin Assurantiën</option>
		<option id="option21" value="21">Bureau Gras</option>
		<option id="option22" value="22">Bureau4 V.O.F. </option>
		<option id="option23" value="23">Business Center Bonne Chance B.V.</option>
		<option id="option24" value="24">C.B.M. Poland</option>
		<option id="option25" value="25">CaseWare Nederland B.V.</option>
		<option id="option26" value="26">ColorCrew</option>
		<option value="27">Coos</option>
		<option value="28">Coperatieve Dienstverlening Heerhugowaard U.A.</option>
		<option value="29"></option>
		<option value="30"></option>
		<option value="31"></option>
		<option value="32"></option>
		<option value="33"></option>
	  </select>
  </div>
  <div id="klanten">
    <div class="klant-1">
      <iframe src="https://jsfiddle.net/q20yjtrh/2/" style="height:200px;width:500px;"></iframe>
    </div>
    <div class="klant-2">
      <iframe src="https://jsfiddle.net/q20yjtrh/2/" style="height:200px;width:500px;"></iframe>
    </div>
  </div>



</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题