Question

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

我该怎么做？

我在想我只缺少一个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>

Answer 1

这可能不是您希望的答案，但我只是建议您从比您发布的代码更复杂的东西开始。

标签很简单：单击标签时，只需停用当前标签+面板并激活新标签。

这是一个快速演示，我刚刚一起向您展示：

<强> 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/

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

1 个答案: