为什么我的垂直制表符js代码不断刷新页面？

时间：2017-08-01 作者：Owaiz Yusufi

我目前正在WordPress管理区中为主题选项创建垂直选项卡。垂直选项卡的代码取自W3school vertical tab

So what\'s the problem

问题是代码正在不断刷新页面。

Here is the code

// Verticall Tabs
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("dr_v_tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

1 个回复
SO网友:Ángela Martina Padrón Pol

我也有同样的问题，没有找到答案。但我也找到了一个没有JavaScript的解决方案。您只能使用CSS+HTML创建选项卡。有点像：

CSS：

<style type="text/css">
        #tabs div
        {
            width: 200px;
            padding: 25px 0;
            margin: 0;
            position: relative;
        }

        #contents div
        {
            display: none;
            position: absolute;
            left: 200px;
            top: 0;
            width: 200%;
            margin-left: 20px;
        }

        #contents div:target
        {
            display: block;
        }
      //And add more features to make it pretty
    </style>
HTML：

<div id="tabs">
    <div id="menu">
       <ul>
           <li><a href="#1">Datos 1</a></li>
           <li><a href="#2">2</a></li>
           <li><a href="#3">3</a></li>
       </ul>
     </div>
     <div id="contents">
          <div id="1" class="tabcontent">1</div>
          <div id="2" class="tabcontent">2</div>
          <div id="3" class="tabcontent">3</div>
     </div>
     </div>


//Sería un ejemplo básico

结束
标签： jquery   javascript   admin   小码农  

相关推荐

正确的jQuery-UI入队方式

我很难在插件中包含jquery ui脚本和样式。看来我的wp_enqueue_script 只会忽略调用。现在已经有很多类似的问题了，但到目前为止，我找到的所有答案都可以归结为wp_enqueue_script 内部wp_enqueue_scripts 动作钩，我已经在做了。在类的构造函数中，我调用：add_action( \'wp_enqueue_scripts\', array($this, \'enqueue_scripts\') ); 然后，如下所示：public function en