在具有 onclick 功能的导航菜单上 (example here)显示一个 div 选项卡内容 我想传递一个附加值来加载特定内容。这是当前代码:
<ul class="tab">
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London', 'capital')">London</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris', 'France')">Paris</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo', 'Japan')">Tokyo</a></li>
</ul>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the <script>document.write(ThirdValue)</script> city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of <script>document.write(ThirdValue)</script>.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of <script>document.write(ThirdValue)</script>.</p>
</div>
这是 Javascript:
function openCity(evt, cityName, ThirdValue) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
alert(ThirdValue);
}
我无法获取 div 中的第三个变量。我可以用 alert(ThirdValue);
看到它, 但使用 <script>document.write(ThirdValue)</script>
我无法在 html 中添加它。
我需要在 html 中添加这个值。如何在 html 中打印/附加此值?
最佳答案
你不应该使用 document.write
,因为它只在 DOM 加载时工作,在 DOM 准备好后,它就不会工作。
而是在 html 中放置一个占位符(例如:<p>London is the {var} city of England.</p>
),并将其替换为 ThirdValue
.方法如下:
var text = document.getElementById(cityName).querySelector('p');
text.innerHTML = text.innerHTML.replace('{var}',ThirdValue);
完整代码:
function openCity(evt, cityName, ThirdValue) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
var text = document.getElementById(cityName).querySelector('p');
text.innerHTML = text.innerHTML.replace('{var}',ThirdValue);
}
<ul class="tab">
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London', 'capital')">London</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris', 'France')">Paris</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo', 'Japan')">Tokyo</a></li>
</ul>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the {var} city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of {var}.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of {var}.</p>
</div>
关于javascript - 如何在 html div 的中间打印/附加单击按钮的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43838659/