文章/答案/技术大牛

发布

社区首页 >问答首页 >如何简化下面的脚本，使其更容易编写HTML？

问如何简化下面的脚本，使其更容易编写HTML？
EN

Stack Overflow用户

提问于 2019-09-30 23:31:33

回答 1查看 77关注 0票数 0

我使用了下面的代码在选择之间切换。但是我使用的脚本很简单，所以我需要用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>

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

javascript

jquery

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-01 00:00:50

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

假设你有：

<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或任何其他读取文件并将其放入文本区域的语言。为此，您可以使用文件读取函数，并在文本区域之间调用它。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58171037

复制

相似问题

问如何简化下面的脚本，使其更容易编写HTML？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何简化下面的脚本，使其更容易编写HTML？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何简化下面的脚本，使其更容易编写HTML？
EN