时间戳

首页 > 解决方案 > 无法获取显示交互式内容的按钮

javascript - 无法获取显示交互式内容的按钮

问题描述

这是一个演示：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>

标签： javascriptjqueryhtmlcss

解决方案

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

// 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而不是 value）

<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');以显示具有同一类的所有类别（它们都将被显示，但在另一个不可见的选项卡中）

推荐阅读