我正在尝试弄清楚如何使用下拉菜单更改 HTML 代码。
这是我目前拥有的
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Languages</button>
<div id="myDropdown" class="dropdown-content">
<a href="(URL LINK)/clients/1080/Canon.html?lc=uk" target="test">English</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=de" target="test">German</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=fr" target="test">French</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=es" target="test">Spanish</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=it" target="test">Italian</a>
</div>
</div>
这会更改下拉列表下方的 iFrame。
<iframe name="test" src="(URL LINK)/clients/1080/Canon.html?lc=uk" scrolling="no" seamless="seamless"></iframe>
在 iFrame 下,我有一个预代码显示如何嵌入上面的 iFrame。
<pre><code><iframe>src="Path of the zip file" scrolling="no" seamless="seamless"></iframe>
</code></pre>
我正在使用 Javascript
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
当用户单击下拉菜单并选择语言时,是否可以实现 iFrame 文件夹托管位置的链接更改?
例如,用户会单击下拉菜单并选择德语。预代码将显示带有德国文件夹链接的 iframe。 (希望这是有道理的)
如果有人可以帮助我,我将不胜感激。
我尝试过但失败了
Jquery
myFunction() {
$("#myDropdown > a").on('click', function(){
var url= $(this).attr('href'); //Get URL from a href
var $iframe = $('#iframeId'); // Get Iframe id
$iframe.attr('src',url); // Insert new URL
var v= $('#code').text(); //get Iframe inside code tags
var code = jQuery('<div />').html(v).text(); //Convert to HTML object
var n = $(code).attr("src",val); //change the src
var fin = $(n).prop("outerHTML"); //get the HTML
var finHTML = jQuery('<div />').text(fin).html(); //Convert HTML into HTML entities
$('#code').text(finHTML); // Change code HTML
});
}
iFrame
<iframe src="#" id="iframeId"></iframe>
导出 iFrame(在文本中)
<pre><code id="code"><iframe src="Path of the <strong>zip file downloaded from email</strong>" scrolling="no" seamless="seamless"></iframe>
</code></pre>
我已经尝试了上面的方法,但它使下拉菜单无法工作。如果有人能帮我解决这个问题,我将感激。
最佳答案
试试这个。它会改变 src
的 iframe
里面<pre>
根据href
点击的 <a>
.
var myDropdown = document.getElementById('myDropdown');
var links = myDropdown.getElementsByTagName('a'); // get all links inside #myDropdown
function changeSRC(e) {
var link = e.target.href; // get href of clicked link
var code = document.getElementsByTagName('code')[0];
code.innerHTML = '<iframe>src="'+link+'" scrolling="no" seamless="seamless"></iframe>';
}
for( var i=0; i<links.length; i++) {
links[i].addEventListener('click', changeSRC); // call changeSRC function when any link is clicked
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Languages</button>
<div id="myDropdown" class="dropdown-content">
<a href="(URL LINK)/clients/1080/Canon.html?lc=uk" target="test">English</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=de" target="test">German</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=fr" target="test">French</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=es" target="test">Spanish</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=it" target="test">Italian</a>
</div>
</div>
<pre>
<code><iframe>src="Path of the zip file" scrolling="no" seamless="seamless"></iframe></code>
</pre>
关于javascript - 使用下拉菜单自动更改代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42487085/