如何解决使用选项卡重复UI卡
我是社区中的新人,很高兴与大家一起加入。我需要一些帮助来缩小我在这里遇到的问题。我正在创建一个新的UI卡,该卡下方带有标签,以更改卡的内容。当我复制卡时,选项卡跟随第一张卡,但内容不会显示在重复的卡上。我正在使用CSS网格。
这是HTML
<script>
function openText(textName) {
var i,tabcontent,tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active","");
}
document.getElementById(textName).style.display = "block";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<div id="Description" class="card-body tabcontent">
<h2 class="card-title">title</h2>
<p>paragraph 1</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam quos deleniti quasi vel vero magni eos,molestias exercitationem est assumenda perferendis ipsa fuga beatae dignissimos illo unde id delectus libero?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam quos deleniti quasi vel vero magni eos,molestias exercitationem est assumenda perferendis ipsa fuga beatae dignissimos illo unde id delectus libero?</p>
</div>
<div id="Impact" class="card-body tabcontent">
<h2 class="card-title">title</h2>
<p>paragraph 2</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam quos deleniti quasi vel vero magni eos,molestias exercitationem est assumenda perferendis ipsa fuga beatae dignissimos illo unde id delectus libero?</p>
</div>
<div id="Triage" class="card-body tabcontent">
<h2 class="card-title">title</h2>
<p>paragraph 3</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam quos deleniti quasi vel vero magni eos,molestias exercitationem est assumenda perferendis ipsa fuga beatae dignissimos illo unde id delectus libero?</p>
</div>
<div id="Support" class="card-body tabcontent">
<h2 class="card-title">title</h2>
<p>paragraph 4</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam quos deleniti quasi vel vero magni eos,molestias exercitationem est assumenda perferendis ipsa fuga beatae dignissimos illo unde id delectus libero?</p>
</div>
<div class="tab">
<button class="tablink" onclick="openText('Description')" id="defaultOpen">title</button>
<button class="tablink" onclick="openText('Impact')">title</button>
<button class="tablink" onclick="openText('Triage')">title</button>
<button class="tablink" onclick="openText('Support')">title</button>
</div>
提前谢谢!!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。