在网页中间实现菜单

Question

我在网页中间实现了一个菜单（注意：这不是顶部导航菜单）。所以这是默认状态：人们可以点击其他菜单项来查看不同的内容。 我尝试为一个菜单项编写以下代码并且它正在工作......但是是否有适用于每个菜单项的优雅解决方案？<script>     $(function() {      $("#menu3").click(function(){          $(this).css({            'text-decoration':'underline',            'font-family':'Gotham-Medium'          });          $("#content1").hide();          $("#content3").show();                });    }); </script>  <nav class="menu">    <ul>      <li><div id="menu1">menu1</div></li>      <li><div id="menu2">menu2</div></li>      <li><div id="menu3">menu3</div></li>      <li><div id="menu4">menu4</div></li>    </ul>  </nav>另外，我为菜单项悬停状态编写了以下代码。非常奇怪，事情与这段代码一起工作：<script>     $(function() {      $("#menu3").mouseenter(function(){          $(this).css({            'text-decoration':'underline',            'font-family':'Gotham-Medium'          });       });    }); </script>但是一旦我添加了 mouseleave 代码....事情就停止了（包括 mouseenter 进入状态，所以当你将鼠标悬停在菜单上时没有任何反应）。不确定发生了什么或如何解决它。提前致谢。<script>     $(function() {      $("#menu3").mouseenter(function(){          $(this).css({            'text-decoration':'underline',            'font-family':'Gotham-Medium'          });       $("#menu3").mouseleave(function(){          $(this).css({            'text-decoration':'none',            'font-family':'Gotham-Medium'          });       });    }); </script>

Answer 1

这是一个工作示例。还有一些你应该知道的事情；

HTML

最好有菜单ID 。因为类名menu很常见，而且您在构建网站时可能很容易遇到样式问题。列表 ( ) 中也没有必要有一个 div <li>...</li>。（如果需要，锚标记( <a>...</a>) 将是比 更好的选择div。）您可以像这样简化它。

    <nav id="menu">

        <ul>

          <li>MENU 1</li>

          <li>MENU 2</li>

          <li>MENU 3</li>

          <li>MENU 4</li>

        </ul>

    </nav>

CSS

您不需要使用 jQuery 来实现样式hover。您可以使用 css 高效地完成它。像这样。

    #menu li {

      font-family: 'Gotham-Medium';

      cursor: pointer;

    }

    #menu li:hover {

      text-decoration: underline;

    }

查询

您不必为每个导航元素编写代码。您可以使用该类来隐藏和仅显示单击的内容。像这样。

      $("#menu li").on("click", function(e) {

        e.preventDefault();

        $("#menu li").hide();

        $(this).show();

      });

Answer 2

对于悬停状态，请使用 CSS。对于 CSS，我的意思是使用:hover选择器。您应该在所有菜单按钮上添加一个类，然后定位它们。例子：

// HTML

<nav class="menu">

    <ul>

      <li><div class="menu-item" id="menu1">menu1</div></li>

      <li><div class="menu-item" id="menu2">menu2</div></li>

      <li><div class="menu-item" id="menu3">menu3</div></li>

      <li><div class="menu-item" id="menu4">menu4</div></li>

    </ul>

  </nav>

// CSS

.menu-item:hover {

  text-decoration: underline;

  cursor: pointer;

}

为了在点击时显示内容，您应该使用与使用 jQuery 添加 css 相同的方法，即使用this. 由于我们在菜单按钮上添加了一个类，我们可以使用它来添加我们的事件侦听器，然后我们还可以在所有菜单内容上添加一个类并将它们全部隐藏在一起。通过在菜单按钮 id 和内容 id 之间保持一种模式，我们可以得到一个通用的解决方案。

$(".menu-item").click(function(){

    $(".menu-content").hide();

    $('#'+$(this).attr('id') + '-content').show();          

});

在这里查看工作小提琴：https ://jsfiddle.net/etqwf3kr/