Question

我的代码有问题吗？

在左侧栏上单击导航按钮时，内容应显示在右侧。

相反，伦敦和巴黎的详细信息都显示在页面上。单击导航按钮时没有任何效果。我的语法或逻辑上有错误吗？

<html>
  <head>
    <style>
    .header {
      background-color:black;
      color:white;
      text-align:center;
      padding:5px;
    }
    .nav {
      line-height:30px;
      background-color:#eeeeee;
      height:300px;
      width:100px;
      float:left;
      padding:5px;
    }
    .active {
      font-weight:bold;
    }
    .section {
      width:350px;
      float:left;
      padding:10px;
    }
    .footer {
      background-color:black;
      color:white;
      clear:both;
      text-align:center;
      padding:5px;
    }
    </style>

  </head>

  <body>
    <div class="header">
      <h1>City Gallery</h1>
    </div>
    <div class="nav">
      <ul>
        <li><a href="#section-london">London</a></li>
        <li><a href="#section-paris">Paris</a></li>
      </ul>
    </div>
    <div id="section-london" class="tab-content">
      <h2>London</h2>
      <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>
    <div id="section-paris" class="tab-content">
      <h2>Paris</h2>
      <p>Paris, France's capital, is a major European city and a global center for art, fashion, gastronomy and culture. Its picturesque 19th-century cityscape is crisscrossed by wide boulevards and the River Seine. </p>
    </div>
    <div class="footer">Footer</div>

    <script type="text/javascript">
    $(document).ready(function () {
      $('.nav ul li:first').addClass('active');
      $('.tab-content:not(:first)').hide();
      $('.nav ul li a').click(function (event) {
        event.preventDefault();
        var content = $(this).attr('href');
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
        $(content).show();
        $(content).siblings('.tab-content').hide();
      });
    });
    </script>

  < /body>
</html>

Answer 1

您需要在代码中包含jQuery库。
添加：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

内容未通过jQuery显示在网页上

1 个答案: