我的网站有 3 个服务,我希望能够单击服务 1 并查看菜单 1,单击服务 2 并查看菜单 2,单击服务 3 并查看菜单 3。我有以下代码,但它是没有按预期工作。当我点击服务 2 和服务 3 时,没有任何显示。
HTML :
<div class="row" id="menu_service1">
<div class="col-md-4">
<span><h5>Choose a line</h5> <select id="lines" class="form-control"></select></span>
<span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span>
</div>
</div>
<div class="row" id="menu_service2">
<div class="col-md-4">
<span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span>
<span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span>
</div>
</div>
<div class="row" id="menu_service3">
<div class="col-md-4">
<p>blah</p>
</div>
</div>
JS :
$(document).ready(function() {
var line_array = ["Line 1", "Line 2", "Line 3"];
var stops = ["stop1", "stop2", "stop3"] ;
for (var i = 0; i < line_array.length; i++) {
$('#lines').append('<option>' + line_array[i] + '</option>');
}
for (var i = 0; i < stops.length; i++) {
$('#stop').append('<option>' + stops[i] + '</option>');
}
$('#menu_service1').hide();
$('#menu_service2').hide();
$('#menu_service3').hide();
$('#Service_1').click(function() {
$('#menu_service1').toggle();
});
$('#Service_2').click(function() {
$('#menu_service2').toggle();
});
$('#Service_3').click(function() {
$('#menu_service3').toggle();
});
});
最佳答案
id
在同一个文档中应该是唯一的,所以尽量用通用类替换重复的,例如:
<span><h5>Choose a line</h5> <select class="form-control lines"></select></span>
<span><h5>Choose a stop</h5> <select class="form-control stop"></select></span>
并且在您的 JS 中将它们与类选择器点 .
一起使用,例如:
$('.lines').append('<option>' + line_array[i] + '</option>');
您还应该通过添加 id 选择器 sogn #
来修复以下两行中的拼写错误:
$('menu_service2').toggle();
$('menu_service2').toggle();
应该是:
$('#menu_service2').toggle();
$('#menu_service2').toggle();
您也可以为多个选择器使用逗号 ,
分隔符,所以不要使用 :
$('#menu_service1').hide();
$('#menu_service2').hide();
$('#menu_service3').hide();
仅使用:
$('#menu_service1,#menu_service2,#menu_service3').hide();
希望这对您有所帮助。
$(document).ready(function() {
var line_array = ["Line 1", "Line 2", "Line 3"];
var stops = ["stop1", "stop2", "stop3"] ;
for (var i = 0; i < line_array.length; i++) {
$('.lines').append('<option>' + line_array[i] + '</option>');
}
for (var i = 0; i < stops.length; i++) {
$('.stop').append('<option>' + stops[i] + '</option>');
}
$('#menu_service1,#menu_service2,#menu_service3').hide();
$('#Service_1').click(function() {
$('.row').hide();
$('#menu_service1').toggle();
});
$('#Service_2').click(function() {
$('.row').hide();
$('#menu_service2').toggle();
});
$('#Service_3').click(function() {
$('.row').hide();
$('#menu_service3').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button id='Service_1'>Service 1</button>
<button id='Service_2'>Service 2</button>
<button id='Service_3'>Service 3</button>
<div class="row" id="menu_service1">
<div class="col-md-4">
<span><h5>Choose a line1</h5> <select class="form-control lines"></select></span>
<span><h5>Choose a stop1</h5> <select class="form-control stop"></select></span>
</div>
</div>
<div class="row" id="menu_service2">
<div class="col-md-4">
<span><h5>Choose a line2</h5> <select class="form-control lines"></select></span>
<span><h5>Choose a stop2</h5> <select class="form-control stop"></select></span>
</div>
</div>
<div class="row" id="menu_service3">
<div class="col-md-4">
<p>blah</p>
</div>
</div>
关于javascript - 使用 Javascript 在 div 元素之间切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35511427/