Javascript 选项卡不会在页面加载时打开选项卡

Javascript tabs will not open tab on pageload

本文关键字：选项 加载 Javascript      更新时间：2023-09-26

我需要添加到此脚本以使网页在页面加载时打开一个选项卡。

我该怎么做？

我认为我缺少一个JavaScript命令。我只是为了我的生活看不到它。

JavaScript：

$(document).ready(function(){
  $('.tabs').each(function(){
    var tab = $(this);
    tab.find('.tab_content').hide(); // Hide all divs
    tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked
      if($(this).hasClass('current_tab')) return false;
      tab.find('ul.tab_nav li a').removeClass('current_tab');
      $(this).addClass('current_tab'); //Set clicked link class to active
      var currentTab = tab.find($(this).attr('href')); 
      tab.find('.tab_content').hide(); // Hide all divs
      $(currentTab).slideDown(); // Show div with id equal to variable    currentTab
      return false;
    });
  });
});

HTML：

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" media="screen" href= "D:'WP'css'style.css"/>
    <script src="D:'WP'script'jquery1.9.1.js"></script>
    <script src="D:'WP'script'easing.js"></script>
    <script src="D:'WP'script'tabs.js"></script>
  </head>
  <body>
    <!--Web page box-->     
    <div id="tab_style" class="box tabs">
      <!--Header start-->
      <div id="header">
        <ul class="tab_nav">
          <li><a href="#home" class="">Home</a></li>
          <li><a href="#about" class="">About</a></li>
          <li><a href="#consulting" class="">Consulting</a></li>
          <li><a href="#social" class="">Social</a></li>
          <li><a href="#contact" class="">Contact</a></li>
        </ul>
      </div>
      <!--header end-->
      <!--contents of site begin-->
      <div class="content">
        <div id="about" class="tab_content">
          <br/>3
          <br/>3
          <br/>3
        </div>
        <div id="contact" class="tab_content"></div>
        <div id="footer">
          <p></p>
        </div>
        <!--footer ends-->  
      </div>
      <!--contents end here-->
    </div>
    <!--Web page box end-->
  </body>

这可能不是你所希望的答案，但我只是想建议你从比你发布的代码稍微不那么复杂的东西开始。

选项卡

很容易：单击选项卡时，只需停用当前选项卡+面板并激活新选项卡即可。

这是我刚刚拼凑起来向您展示的快速演示：

.HTML：

<div class="tabs">
    <span class="tab" data-tab="thing1">Thing 1</span>
    <span class="tab" data-tab="thing2">Thing 2</span>
    <span class="tab" data-tab="thing3">Thing 3</span>
</div>
<div class="panels">
    <div class="panel" data-tab="thing1">
        <h2>Thing 1</h2>
        <p>blah blah</p>
    </div>
    <div class="panel" data-tab="thing2">
        <h2>Thing 2</h2>
        <p>foo bar</p>
    </div>
    <div class="panel" data-tab="thing3">
        <h2>Thing 3</h2>
        <img src="http://slodive.com/wp-content/uploads/2014/03/funny-bab.jpg">
    </div>
</div>

JavaScript：

// hook tab clicks:
$('body').on('click', '.tab', show);
// show first tab:
show('.tab');
function show(tab) {
    // accepts an Event or a CSS selector:
    tab = $(tab.target || tab).attr('data-tab');
    // de-activate current tab:
    $('[data-tab].active').declassify('active');
    // activate new tab:
    $('[data-tab="'+tab+'"]').classify('active');
}

.CSS：

.tab {
    display: block;
    float: left;
    padding: 5px 10px;
    margin: 0 5px;
    background: #FFF;
    transform-origin: 0 100%;
    transition: all 500ms ease;
    cursor: pointer;
}
.tab:not(.active) {
    opacity: 0.5;
    transform: perspective(1000px) rotateX(30deg);
}
.panel {
    background: #FFF;
    padding: 20px;
}
.panel:not(.active) {
    display: none;
}

JSFiddle 演示：http://jsfiddle.net/developit/42zcagjb/

相关文章：