单击特定链接时按类显示或隐藏元素答案

【问题标题】：Show or hide a element by class when you click a specific link单击特定链接时按类显示或隐藏元素
【发布时间】：2018-04-12 21:40:53
【问题描述】：

我正在为标签使用 WPBakery Page Builder。当第一个带有 href #1521496635357-e8313acf-e8c2 的标签打开时，我想在标签部分之外（在不同的行上）显示一个具有特定类的文本块，而当带有 href #1521496635380-99d0c08b- 的第二个标签打开另一个文本块时67d8 已打开（并且是第一个要隐藏的文本块）。

你能给我一个关于 CSS 或 JS 的提示吗？

谢谢！

    <ul class="vc_tta-tabs-list">
    <li class="vc_tta-tab vc_active" data-vc-tab="">
    <a href="#1521496635357-e8313acf-e8c2" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">PRIX STANDARD</span>
</a>
    </li>
    <li class="vc_tta-tab" data-vc-tab="">
<a href="#1521496635380-99d0c08b-67d8" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">PRIX BUDGET</span>
</a>
    </li>
    </ul>

【问题讨论】：

标签： javascript visual-composer

【解决方案1】：

您的示例对我来说并不完全清楚，但您应该能够将事件侦听器添加到您的选项卡：

<a href="#1521496635357-e8313acf-e8c2" data-vc-tabs="" data-vc-container=".vc_tta" onclick="doSomething()">

在你的页面 javascript 中，你可以有一个函数来做某事：

function doSomething() {
    document.getElementsByClassName("myclass")[0].style.display = "none";
    document.getElementsByClassName("myotherclass")[0].style.display = "inline";
}

您当然可以通过引入 jquery 或其他框架来简化其中的一些处理来更好地处理这个问题，但取决于您的情况，这可能可行也可能不可行。

【讨论】：