Question

我的问题是指我的网站usaletsgo.de上的弹出菜单。这是网站左上方的红色弹出按钮。

有两页，但是我想添加第三页。通过切换到页面2，页面1的所有列表元素都从.visible切换到css类.hidden。翻到第1页，第2页的所有列表元素也会发生同样的情况。

CSS如下：

.visible{
display:block;
}

.hidden{
display:none;
}

JS和HTML代码：

<script>
function switch(){
$('.toggle').toggleClass('visible hidden');
};
</script>


<li class="toggle visible">Factory Butte </a></li>
<li class="toggle visible">Moonscape Overlook </a></li>
<li class="toggle visible">Wedge Overlook </a></li>
<li class="toggle visible">Fantasy Canyon </a></li>
<li class="toggle visible">Hamburger Rocks </a></li>

<li class="toggle hidden">Leprechaun Canyon </a></li>
<li class="toggle hidden">Canyon X </a></li>
<li class="toggle hidden">Paria Canyon </a></li>
<li class="toggle hidden">Gold Butte NM </a></li>
<li class="toggle hidden">Vermilion Cliffs NM </a></li>

<li class="toggle visible"> <a href="javascript:switch()">Page 2</a></li>
<li class="toggle hidden"> <a href="javascript:switch()">Page 1</a></li>

这可能不是最复杂的代码，但是它可以工作（我是Java初学者）。

如何添加第三页？

Answer 1

看看这个。该代码具有一些不错的技巧，您可以使用
例如，它不在乎有多少菜单

$(function() {
  var $uls = $("#menu ul"), len = $uls.length; 
  $("#menu a").on("click",function(e) {
    e.preventDefault(); // the link is abused to show a hand. We could use a span and cursor:pointer
    var vis = $(this).closest("ul").index()+1; // which UL does the link belong to?
    if (vis>=len) vis=0;
    $uls.hide().eq(vis).show(); // show the relevant ul
  }).eq(len-1).click(); // show the first (click the last link) when loading
  $("#menu").show(); // reveal (to not show all and then hide)
});

#menu { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
  <ul>
    <li>Factory Butte</li>
    <li>Moonscape Overlook</li>
    <li>Wedge Overlook</li>
    <li>Fantasy Canyon</li>
    <li>Hamburger Rocks</li>
    <li><a href="#">Page 2</a></li>
  </ul>
  <ul>
    <li>Leprechaun Canyon</li>
    <li>Canyon X</li>
    <li>Paria Canyon</li>
    <li>Gold Butte NM</li>
    <li>Vermilion Cliffs NM</li>
    <li><a href="#">Page 3</a></li>
  </ul>
  <ul>
    <li>Bla Canyon</li>
    <li>Canyon Bla</li>
    <li>Paria bla</li>
    <li>Gold bla NM</li>
    <li>Bla Cliffs NM</li>
    <li><a href="#">Page 1</a></li>
  </ul>
</div>

Answer 2

谢谢大家。

在朋友的一点帮助下，它正在工作。

在三个班级之间切换

2 个答案: