无法获取按钮以显示交互式内容

Question

这是一个演示：https://jsfiddle.net/rv18kd6c/31/

我无法尝试显示其他3个按钮，内容与“最近”按钮相同。有人可以给我一些指示吗？其他三个按钮也需要以与“最近”按钮相同的方式显示侧栏和表格。提前致谢 ：）

下面是到目前为止已编写的所有代码。 JQuery用于显示和隐藏内容。

javascript会更改哪些表格正在显示，我想我还需要3个javascript查询，但我正在努力使其工作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  .button-wrapper {
    text-align: center;
    padding: 10px;
  }

  .button-wrapper a {
    text-decoration: none;
    color: #fff;
    margin: 10px
  }

  .content h1 {
    text-align: center;
    margin-top: 2em;
  }

  .top-button {
    padding: 5px;
    background-color: #00622b;
    border: 1px solid black;
    text-align: center;
    width: 50px;
    height: 5rem;
    margin: 3px;
    -webkit-border-radius: 12;
    -moz-border-radius: 12;
    border-radius: 4px;
  }

  .top-button a {
    text-decoration: none;
    color: black;
  }

  table {
    width: 100%;
    font-size: 2vw;
    text-align: center;
  }

  table tr:nth-child(even) {
    background-color: #98FB98;
  }

  table tr:nth-child(odd) {
    background-color: mediumseagreen;
  }

  table th {
    background-color: #98FB98;
    color: #00622b;
  }

  * {
    box-sizing: border-box
  }

  html,
  body {
    height: 100%;
    width: 100%;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
  }

  /* Style the tab */

  .tab {
    float: left;
    border: none;
    background-color: #00622b;
    width: 30%;
  }

  /* Style the buttons inside the tab */

  .tab button {
    display: block;
    background-color: inherit;
    color: #ffffff80;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 2vw;
  }

  /* Change background color of buttons on hover */

  .tab button:hover {
    color: #ffffffbf;
  }

  /* Create an active/current "tab button" class */

  .tab button.active {
    background-color: #00622b;
    color: #fff;
  }

  /* Style the tab content */

  .tabcontent {
    float: left;
    padding: 0px 12px;
    width: 70%;
    border-left: none;
  }

</style>
<div class="wrapper">
  <div class="button-wrapper">
    <a class="flip top-button" href="#first-div" target="" data-toggle="">Recent</a>
    <a class="flip top-button" href="#second-div" target="" data-toggle="">Top</a>
    <a class="flip top-button" href="#third-div" target="" data-toggle="">Standard</a>
    <a class="flip top-button" href="#fourth-div" target="" data-toggle="">Rotten</a>
  </div>

  <div class="content" id="first-div">
    <div class="tab">
      <button class="tablinks" onclick="openRating(event, 'Value')" id="defaultOpen">Value for Money</button>
      <button class="tablinks" onclick="openRating(event, 'Time')">Time Taken</button>
      <button class="tablinks" onclick="openRating(event, 'Quality')">Quality of Work</button>
      <button class="tablinks" onclick="openRating(event, 'Average')">Average Rating</button>
    </div>

    <div id="Value" class="tabcontent">
      <h3>
        Recent
      </h3>
      <table id="bottom5">

        <tr>
          <th>Value for Money</th>
        </tr>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
        </tr>
      </table>
    </div>

    <div id="Time" class="tabcontent">
      <h3>
        Recent
      </h3>
      <table id="bottom5">

        <tr>
          <th>Time Taken</th>
        </tr>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
        </tr>
      </table>
    </div>

    <div id="Quality" class="tabcontent">
      <h3>
        Recent
      </h3>
      <table id="bottom5">

        <tr>
          <th>Quality of Work</th>
        </tr>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
        </tr>
      </table>
    </div>

    <div id="Average" class="tabcontent">
      <h3>
        Recent
      </h3>
      <table id="bottom5">

        <tr>
          <th>Average Rating</th>
        </tr>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
        </tr>
      </table>
    </div>

  </div>
  <div class="content" id="second-div" style="display:none">
  </div>
  <div class="content" id="third-div" style="display:none">
  </div>
  <div class="content" id="fourth-div" style="display:none">
  </div>

  <script>
    function openRating(evt, ratingName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(ratingName).style.display = "block";
      evt.currentTarget.className += " active";
    }

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

    // only show one panel at a time
    jQuery(".flip").on("click", function(e) {
      var target = jQuery(this).attr("href");
      jQuery(target).slideToggle("fast");
      jQuery(".content").not(target).hide();
      e.preventDefault();
    });

  </script>

Answer 1

这里的问题是在页面加载时你启动这个：

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

但是当你有多个defaultOpen ID时，只点击第一个（这不是问题，因为只有第一个可见），然后当你点击另一个标签时，你不刷新新的defaultOpen来选择。你就是这样做的：

// only show one panel at a time
jQuery(".flip").on("click", function(e) {
  var target = jQuery(this).attr("href");
  jQuery(target).slideToggle("fast");
  jQuery(".content").not(target).hide();
  jQuery(target).find("#defaultOpen")[0].click();//here i find the default open IN the newly active tab
  e.preventDefault();
});

但这会在视觉上无效，因为你的onclick =“openRating（event，'Value'）”只会打开它找到的第一个#Value“div：从那里有两个解决方案：

1你永远不会在左边的类别中使用两次相同的id（例如，注意ids Valuetab2而不是值）

<div class="content" id="second-div" style="display:none">
  <div class="tab">
    <button class="tablinks" onclick="openRating(event, 'Valuetab2')" id="defaultOpen">Value for Money</button><!--changed here -->
    ...
  </div>
  <div id="Valuetab2" class="tabcontent"><!--changed here -->
    ...

或者2你使用类进行类别调整并调整一些你的代码，这样它就可以打开同一个类的每个类别

<div class="content" id="second-div" style="display:none">
  <div class="tab">
    <button class="tablinks" onclick="openRating(event, 'Value')" id="defaultOpen">Value for Money</button>
    ...
  </div>
  <div class="Value tabcontent"> <!--changed here -->

并用document.getElementById(ratingName).style.display = "block";替换$("."+ratingName).css('display','block');以显示具有相同类的所有类别（它们将全部显示，但在另一个的隐形标签内）