gpt4 book ai didi

javascript - 如何简化下面的Script以便更容易编写HTML?

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

我使用下面的代码在选择之间进行切换。但我使用的脚本很简单,因此我需要用 HTML 编写更多内容来隐藏其他选项卡,如您在代码中看到的那样。帮助我使用脚本来简化 HTML 部分。

function showStuff(id) {
var id1 = id.replace(/[^\w\s]/gi, '');
document.getElementById(id).style.display = "block";
document.getElementById(id1).classList.add('active');
}

function hideStuff(id) {
var id1 = id.replace(/[^\w\s]/gi, '');
document.getElementById(id).style.display = "none";
document.getElementById(id1).classList.remove('active');
}
div.container {
padding: 7px;
height: 100%;
width: 80%;
margin: 0 auto;
}
<body>
<div class="container">
<ol>
<li id="tabs1" onclick="showStuff('tabs-1'); hideStuff('tabs-2'); hideStuff('tabs-3');hideStuff('tabs-4'); hideStuff('tabs-5');hideStuff('tabs-6'); hideStuff('tabs-7');hideStuff('tabs-8'); hideStuff('tabs-9');hideStuff('tabs-10'); hideStuff('tabs-11');hideStuff('tabs-12'); hideStuff('tabs-13');hideStuff('tabs-14'); hideStuff('tabs-15');hideStuff('tabs-16');hideStuff('tabs-17');hideStuff('tabs-18');hideStuff('tabs-19');">selet A</li>
<li id="tabs2" onclick="hideStuff('tabs-1'); showStuff('tabs-2'); hideStuff('tabs-3');hideStuff('tabs-4'); hideStuff('tabs-5');hideStuff('tabs-6'); hideStuff('tabs-7');hideStuff('tabs-8'); hideStuff('tabs-9');hideStuff('tabs-10'); hideStuff('tabs-11');hideStuff('tabs-12'); hideStuff('tabs-13');hideStuff('tabs-14'); hideStuff('tabs-15');hideStuff('tabs-16');hideStuff('tabs-17');hideStuff('tabs-18');hideStuff('tabs-19');">select B</li>
</ol>
</div>
<div style="display: table-cell; width: 1%; "></div>
<div id="tabs-1">
<h1>A is selected</h1>
<textarea onclick="this.focus(); this.select();" readonly="readonly">
this is example and A is selected
</textarea>
</div>
<div id="tabs-2" style="display : none">
<h1>B is selected:</h1>
<textarea onclick="this.focus();this.select()" readonly="readonly">
Another example for b is selected

</textarea></div>
</body>

此外,我需要从文本文件(存储在服务器中)或通过任何其他方式获取文本区域内容,这样我就可以避免在代码中添加冗长的部分。有没有办法用文本文件替换textarea??

最佳答案

对于显示和隐藏,您可以使用相同的功能隐藏和取消隐藏。

假设你有:

<ol>
<li id="tabs1" class="tabheader" onclick="setActive()" data-id="tab1">selet A</li>
<li id="tabs2" class="tabheader" onclick="setActive()" data-id="tab2">select B</li>
</ol>
<div id="tab1" class="tabcontent">
<!--Your content-->
</div>
<div id="tab2" class="tabcontent">
<!--Your content-->
</div>

您可以使用以下 jquery 代码:

$(".tabheader").click(function(){
$(".tabcontent").hide();
$("#"+$(this).data("id")).show();
});

要从文件服务器端写入文本区域,您可以使用 PHP 或任何其他读取文件并放入文本区域的语言。为此,您可以使用文件读取功能并在文本区域之间调用它。

关于javascript - 如何简化下面的Script以便更容易编写HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58171037/

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