淘先锋技术网

首页 1 2 3 4 5 6 7

jquery点击导航栏切换内容

如果你想要在你的网站上实现简洁的导航栏，同时又想能够快速地切换内容，那么jquery是你不可缺少的工具之一。


<!DOCTYPE html>
<html>
<head>
  <title>导航栏切换内容</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul>
    <li id="home">首页</li>
    <li id="about">关于我们</li>
    <li id="contact">联系我们</li>
  </ul>
  <div id="content"></div>
  <script>
    $("#home").click(function(){
      $("#content").html("<p>欢迎来到我们的首页！</p>");
    });
    $("#about").click(function(){
      $("#content").html("<p>我们是一家致力于创新的公司！</p>");
    });
    $("#contact").click(function(){
      $("#content").html("<p>欢迎联系我们！</p>");
    });
  </script>
</body>
</html>

jquery点击导航栏切换内容

在这个例子中，我们创建了一个包含三个选项的导航栏，并且将选项的id设置为"home"、"about"和"contact"。我们之后在页面的下方创建了一个名为"content"的空

元素，我们将使用它来显示我们在导航栏中选择的选项的内容。

我们之后使用jQuery来为每个选项添加单击事件。当我们单击一个选项时，我们使用jQuery的html()方法将选项的内容插入到我们先前创建的空

元素中。

这样，我们就创建了一个简单、有效的导航栏，用户可以方便地浏览我们的网站内容，而无需切换不同的页面。