Question

这是我在CI中的查看页面

<body>
<!-- Image and text -->
<nav class="navbar navbar-inverse">
   <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="">Admin LTE</a>
    </div>
<!--     <ul class="nav navbar-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
</ul> -->
<ul class="nav navbar-nav navbar-right">
  <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
  </div>
</nav>

<div class="container-fluid">

<div class="sidenav">

  <a href="#" class="admin">Admin</a>
  <a href="#" class="teacher">Teacher</a>

  <a href="#" class="student">Student</a>
  <a href="#" class="batch">Batch</a>


</div>

<div class="main">

  <div id="admin" style="display: none;"><?php $this->load->view('V_Admin/Admin') ?></div>
  <div id="teacher" style="display: none;"><?php $this->load->view('V_Teacher/Teacher') ?></div>
  <div id="student" style="display: none;"><?php $this->load->view('V_Student/Student') ?></div>
  <div id="batch" style="display: none;"><?php $this->load->view('V_Batch/Batch') ?></div> 


<div>

</div>

</body>

这是JS脚本

    $(document).ready(function(){
    $('.admin').click(function(){
      $('#admin').show();
      $('#teacher').hide();
      $('#student').hide();
      $('#batch').hide();
    });

    $('.teacher').click(function(){
      alert("teacher");
      $('#admin').hide();
      $('#teacher').show();
      $('#student').hide();
      $('#batch').hide();
    });

    $('.student').click(function(){
      $('#admin').hide();
      $('#teacher').hide();
      $('#student').show();
      $('#batch').hide();
    });

    $('.batch').click(function(){
      alert('batch');
      $('#admin').hide();
      $('#teacher').hide();
      $('#student').hide();
      $('#batch').show();
    });
  });

问题是当我单击“管理员”和“学生”时，它工作正常，但不适用于“教师”和“批处理”。怎么了但是当我单击“教师和批次”的“教师和批次”警报时，表示该功能正在工作，但div的显示和隐藏不起作用

演示：

$(document).ready(function() {
  $('.admin').click(function() {
    $('#admin').show();
    $('#teacher').hide();
    $('#student').hide();
    $('#batch').hide();
  });

  $('.teacher').click(function() {
    //alert("teacher");
    $('#admin').hide();
    $('#teacher').show();
    $('#student').hide();
    $('#batch').hide();
  });

  $('.student').click(function() {
    $('#admin').hide();
    $('#teacher').hide();
    $('#student').show();
    $('#batch').hide();
  });

  $('.batch').click(function() {
    //alert('batch');
    $('#admin').hide();
    $('#teacher').hide();
    $('#student').hide();
    $('#batch').show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidenav">
  <a href="#" class="admin">Admin</a>
  <a href="#" class="teacher">Teacher</a>
  <a href="#" class="student">Student</a>
  <a href="#" class="batch">Batch</a>
</div>

<div class="main">
  <div id="admin" style="display: none;">
    admin
  </div>
  <div id="teacher" style="display: none;">
    teacher
  </div>
  <div id="student" style="display: none;">
    student
  </div>
  <div id="batch" style="display: none;">
    batch
  </div>
</div>

jQuery的显示/隐藏/切换功能无法正常工作

0 个答案: