关于tab切换有个常用的功能是如何得知某个tab当前处于激活状态，然后进行相关操作，获取当前tab激活状态：
var tag = '';
var isActive = document.getElementById("Tab1").getAttribute("class");
if (isActive === 'active') {
tag = 'tab1 is active';
} else {
tag = 'tab2 is active';
}
下拉框选定一级选项后自动关联相关二级选项
这个本质上就是key-value的对应关系
场景：选择一级菜单后，对应的二级菜单会关联变化，防止用户选错
html: <label class="col-lg-2">一级下拉框:</label> <div class="col-lg-4"> <select style="width:80%" class="select2" id="first"> <option></option> <!--初始化select下拉框的值--> <% for(var i in Object.keys(datadict.data)) {%> <option value="<%= Object.keys(datadict.data)[i] %>"><%= Object.keys(datadict.data)[i] %></option> <% } %> </select> </div> <label class="col-lg-2">二级下拉框:</label> <div class="col-lg-4"> <select style="width:80%" class="select2" id="second"> <option></option> </select> </div> js： $(document).ready(function() { var datadict = {data:{name:['小胖','小杰','小明']}, {hobby:['play guitar','study','play games']}, {species:['cat','dog','horse','fish']}, {other:['elephant','dophin']} } //选定一级后，自动关联二级 $('#first').click(function(){ var first = $('#first').val(); //获取一级菜单的选中值[name,hobby,species,other] var sec = datadict.data[first] ; //alert(sec); $('#second').empty() $('#second').append('<option></option>'); for(var i in sec) { var option = $('<option value="' + sec[i] + '">').html(sec[i]); $('#second').append(option); } }); }); </script> |
这里想表明的其实是在html里直接初始化数据的方式，若是从后端传过来的json格式的数据，需要在document里处理一下：
var datadict = <%- JSON.stringify(datadict) %>;
点击按钮弹出对话框
这里只给出modal的一个框架，实际弹出的modal可以有很丰富的内容
场景：点击弹出对话框，对话框可以是程序执行的结果，也可以与用户交互的对象。
