为了账号安全,请及时绑定邮箱和手机立即绑定

如何简化下面的Script,让写HTML更容易?

如何简化下面的Script,让写HTML更容易?

手掌心 2021-11-04 15:11:00
我使用以下代码在选择之间切换。但是我使用的脚本很简单,所以我需要在 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 内容,以便我可以避免在代码中添加冗长的部分。有没有办法用文本文件替换textarea?
查看完整描述

1 回答

?
白衣染霜花

TA贡献1796条经验 获得超10个赞

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


假设你有:


<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();

});

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


查看完整回答
反对 回复 2021-11-04
  • 1 回答
  • 0 关注
  • 158 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信