Question

我正在处理单页网站，并希望根据点击的菜单项显示内容。而不是每次我尝试使用JQuery实现它时加载新页面。如果有人可以帮我弄清楚我的代码错在哪里。

＆＃13;

$('#campaignsPage, #subscribersPage, #reportsPage').hide();

$(".sideNav li").each(function(i) {
  $(this).click(function() {
    $("#wrapper").find("div:eq('" + i + "')").show().siblings().hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#" style="display: inline-block; width:250px;">Logo Image</a>
    <ul class="navbar-nav" id="sideNav">
      <li id="campaignsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Campaigns</strong></a>
      </li>
      <li id="subscribersNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Subscribers</strong></a>
      </li>
      <li id="reportsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Reports</strong></a>
      </li>
    </ul>
  </nav>

  <div id="wrapper">
    <div id="campaignsPage">
      <p>This is campaign Page</p>
    </div>
    <div id="subscribersPage">
      <p>This is subscribers page</p>
    </div>
    <div id="reportsPage">
      <p>MUSIC PAGE reports</p>
    </div>
  </div>
</div>

＆＃13;

期望的结果 - ：如果我点击菜单中的广告系列项目（id =＆＃34; campaignsNav＆＃34;），则div的内容为id =＆＃34; campaignsPage＆＃34;应该显示。

Answer 1

您不需要迭代li来附加相同的事件。您可以绑定单击元素，使用单击的li元素id为目标元素创建id，并使用它显示隐藏目标和兄弟元素：

 $("#sideNav li").click(function(i) {
   var targetDivID = this.id.replace('Nav','Page');    
   $('#'+targetDivID).show().siblings().hide();
 });

您还可以使用.first().click()链接点击事件以触发第一个元素点击并默认显示。

＆＃13;

$(function(){
  $("#sideNav li").click(function(i) {
     var targetDivID = this.id.replace('Nav','Page');    
     $('#'+targetDivID).show().siblings().hide();
   }).first().click(); 
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <a class="navbar-brand" href="#" style="display: inline-block; width:250px;">Logo Image</a>
      <ul class="navbar-nav" id="sideNav">
        <li  id="campaignsNav">
          <a class="nav-link" href="#" style="margin-left:30px;"><strong>Campaigns</strong></a>
        </li>
        <li id="subscribersNav">
          <a class="nav-link" href="#" style="margin-left:30px;"><strong>Subscribers</strong></a>
        </li>
        <li  id="reportsNav">
          <a class="nav-link" href="#" style="margin-left:30px;"><strong>Reports</strong></a>
        </li>    
      </ul>
    </nav>

    <div id="wrapper">
        <div id="campaignsPage"><p>This is campaign Page</p></div>
        <div id="subscribersPage"><p>This is subscribers page</p></div>
        <div id="reportsPage"><p>MUSIC PAGE reports</p></div>
    </div>
</div>

＆＃13;

Answer 2

您的ul元素的ID值为sideNav，但您使用的是.sideNav类选择器，应将其更改为#sideNav的ID选择器，它会很有效：

＆＃13;

$(document).ready(function(){
    $('#campaignsPage, #subscribersPage, #reportsPage').hide();
    $("#sideNav li").each(function(i) {
        $(this).click(function() {
            $("#wrapper").find("div:eq('" + i + "')").show().siblings().hide();
        });
    }); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <a class="navbar-brand" href="#" style="display: inline-block; width:250px;">Logo Image</a>
      <ul class="navbar-nav" id="sideNav">
        <li  id="campaignsNav">
          <a class="nav-link" href="#" style="margin-left:30px;"><strong>Campaigns</strong></a>
        </li>
        <li id="subscribersNav">
          <a class="nav-link" href="#" style="margin-left:30px;"><strong>Subscribers</strong></a>
        </li>
        <li  id="reportsNav">
          <a class="nav-link" href="#" style="margin-left:30px;"><strong>Reports</strong></a>
        </li>    
      </ul>
    </nav>

    <div id="wrapper">
        <div id="campaignsPage"><p>This is campaign Page</p></div>
        <div id="subscribersPage"><p>This is subscribers page</p></div>
        <div id="reportsPage"><p>MUSIC PAGE reports</p></div>
    </div>
</div>

＆＃13;

Answer 3

您必须使用.sideNav更改#sideNav，因为您使用id而不是class

＆＃13;

$('#campaignsPage, #subscribersPage, #reportsPage').hide();

$("#sideNav li").each(function(i) {
  $(this).click(function() {
    $("#wrapper").find("div:eq('" + i + "')").show().siblings().hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#" style="display: inline-block; width:250px;">Logo Image</a>
    <ul class="navbar-nav" id="sideNav">
      <li id="campaignsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Campaigns</strong></a>
      </li>
      <li id="subscribersNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Subscribers</strong></a>
      </li>
      <li id="reportsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Reports</strong></a>
      </li>
    </ul>
  </nav>

  <div id="wrapper">
    <div id="campaignsPage">
      <p>This is campaign Page</p>
    </div>
    <div id="subscribersPage">
      <p>This is subscribers page</p>
    </div>
    <div id="reportsPage">
      <p>MUSIC PAGE reports</p>
    </div>
  </div>
</div>

＆＃13;

点击项目没有显示Div项目？

3 个答案: