Question

我正在尝试使两个按钮的功能相似。第一个功能是，当单击它们时，将显示归因于它们的特定菜单。即单击时，“ buttonOne”显示菜单一，而“ buttonTwo”显示菜单二，而不是菜单一。一次只能显示一个菜单，并且显示时它们在屏幕上位于同一位置。

第二个功能是更改最后单击的按钮的颜色，以指示正在显示哪个菜单。另一个按钮应恢复为未单击的样式。

我已经能够弄清楚如何获得更改样式的按钮，并且在一个实践论坛中，可以通过样式更改获得一个显示和隐藏的菜单，但无法将其应用于我的主菜单。代码或第二个按钮的帐户。下面是代码的精简版本。查看器中的内容固定在菜单中的项目上。这就是为什么我希望用户能够切换可见菜单。我知道这段代码中的第二个功能不在脚本部分。我希望它会镜像第一个按钮的功能。因此，为了节省空间，我将其省略。

 <body>
  <section id="main_body">
    <section id="nav_area">
      <nav class="viewer_nav" id="menu_one">
        <ul>
         <li>Item 1 - href'd to view_area_one</li>
          <li>Item 2 - href'd to view_area_one</li>
        </ul>
      </nav>

      <nav class="viewer_nav" id="menu_two">
        <ul>
          <li>Item 3 - href'd to view_area_two</li>
          <li>Item 4 - href'd to view_area_two</li>
        </ul>
      </nav>
    </section>

    <div id="content_area">


  <div class="viewer_class" id="view_area_one">
    <input type= "button" value="Viewer One" id="buttonOne" class="button_style"  onclick="switchViewer()" />
   <p>Content for menu two will go here and user can jump to a section that is linked in menu_one</p>
  </div>

  <div class="viewer_class" id="view_area_two">
   <input type= "button" value="Viewer Two" id="buttonTwo" class="button_style"  onclick="switchViewertwo()" />
   <p>Content for menu two will go here and user can jump to a section that is linked in menu_two</p>
  </div>
</div>

 <script>
 function switchViewer() {
  var x = document.getElementById("viewer_two");
  var y = document.getElementById('buttonOne');
  if (x.style.display === "none") {
    x.style.display = "block";
    y.value="Viewer One";
  } else {
    x.style.display = "none";
  }
  return false;
}
</script>

Answer 1

您可以替换按钮并使用单选按钮。他们已经具有内置功能来替换先前选择的值。这样，您可以通过使用纯CSS设置样式，为单选组的每个元素显示不同的div，如下所示：

$(document).ready(function(){
  $('.nav-menu input').on('change', function(){
    //$('.content-div').hide();
    $('.content-div[data-div=' + $(this).data('div') + ']').toggle(this.checked);
  });
})

input[type=checkbox]{
  position:absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
}

label[for*=radio-menu],
label[for*=js-menu]{
  display: inline-block;
  padding: 5px;
  border-radius: 3px;
  background: #7689a9;
  cursor: pointer;
}

label[for*=radio-menu]:hover {
  background: #4d658d;
}

input[type=checkbox]:checked + label {
  background: #152c55;
  color: #fff;
}

.menu-div,
.content-div{
  display: none;
}

.menu-1:checked ~ .div-1,
.menu-2:checked ~ .div-2,
.menu-3:checked ~ .div-3,
.menu-4:checked ~ .div-4{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>Same-level, pure CSS</h1>
  <input type="checkbox" name="menu" class="menu-1" id="radio-menu-1" />
  <label for="radio-menu-1">Menu 1</label>
  <input type="checkbox" name="menu" class="menu-2" id="radio-menu-2" />
  <label for="radio-menu-2">Menu 2</label>
  <input type="checkbox" name="menu" class="menu-3" id="radio-menu-3" />
  <label for="radio-menu-3">Menu 3</label>
  <input type="checkbox" name="menu" class="menu-4" id="radio-menu-4" />
  <label for="radio-menu-4">Menu 4</label>
  <div class="menu-div div-1">Content 1</div>
  <div class="menu-div div-2">Content 2</div>
  <div class="menu-div div-3">Content 3</div>
  <div class="menu-div div-4">Content 4</div>
</div>
<div>
  <h1>Different Level, JS</h1>
  <nav class="nav-menu">
    <input type="checkbox" name="menu-2" data-div="1" id="js-menu-1" />
    <label for="js-menu-1">Menu 1</label>
    <input type="checkbox" name="menu-2" data-div="2" id="js-menu-2" />
    <label for="js-menu-2">Menu 2</label>
    <input type="checkbox" name="menu-2" data-div="3" id="js-menu-3" />
    <label for="js-menu-3">Menu 3</label>
    <input type="checkbox" name="menu-2" data-div="4" id="js-menu-4" />
    <label for="js-menu-4">Menu 4</label>
  </nav>
  <div class="div-container">
    <div class="content-div" data-div="1">
      Content 1
    </div>
    <div class="content-div" data-div="2">
      Content 2
    </div>
    <div class="content-div" data-div="3">
      Content 3
    </div>
    <div class="content-div" data-div="4">
      Content 4
    </div>
  </div>
 </div>

您也可以使用一小段代码来隐藏所有内容，并仅显示选中的“按钮”的相应容器，如第二个示例。

建立双重功能按钮

1 个答案: