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

Question

我正在使用WPBakery页面生成器创建选项卡。当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>

Answer 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或其他框架来简化某些处理，但这取决于您的情况，这可能是可行的，也可能不可行。