这是我在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>