gpt4 book ai didi

javascript - iframe 不显示其内容

转载 作者:行者123 更新时间:2023-11-28 02:04:22 25 4
gpt4 key购买 nike

我为每个下拉菜单创建了一个 iframe。所以这是 html、css 和 JS:

$(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;
}
<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>

我不明白为什么它不起作用,我已经为此绞尽脑汁了一段时间。

这很有趣,因为当我在网站的 F12 中手动将“隐藏”更改为“显示”时,它确实显示了用鼠标显示的框架,而不是内容本身。所以我不知道哪里会出错!

提前致谢,滚

最佳答案

不要使用隐藏属性,如果是这样,请尝试删除该属性。JQuery .show() 根据使用的元素将 css 显示更改为 block 或内联 block 。因此,要么使用 jQuery 从元素中删除隐藏属性,要么不要在 css 中的所有元素上使用 hidden 属性,而是使用 display:none ,因此它将隐藏直到选择完成。在选择时,使用 jquery.show()

供引用:

$(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;
}

#klanten {
margin-top: 50px;
}

#klanten div {
display: none;
}
<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>

关于javascript - iframe 不显示其内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49106193/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com