<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><script type="text/javascript" src="jquery-3.0.0.min.js"></script>
</head>
<style>
.container {
width: 800px;
height: 600px;
border: 2px solid #000;
}
.grade-list {
height: 40px;
border-bottom: 1px solid #999;
margin-bottom: 20px;
margin-top: 20px;
}
.grade-list span{
display:block;
width:20px;
height:20px;
border: 1px solid #000;
/*浮动一次*/
float: left;
}
.label_btn {
/*浮动2次*/
float: left;
margin-right: 10px;
}
.butActive {
background: violet;
}
.second_box {
position: relative;
}
</style>
<body>
<!-- 叶子类目展示内容-->
<div class="container">
<!-- 叶子类目展示内容-->
<div class="grade-list clearfix" id="tel">
<div class="label_btn clearfix"><span id="50023643" class="cc"></span><label>棒球鞋</label></div>
<div class="label_btn clearfix"><span id="50005900" class="cc"></span><label>足球鞋</label></div>
<div class="label_btn clearfix"><span id="50023643" class="cc"></span><label>球鞋</label></div>
<div class="label_btn clearfix"><span id="50005900" class="cc"></span><label>女生上衣</label></div>
<div class="label_btn clearfix"><span id="125612007" class="cc"></span><label>男生上衣</label></div>
<div class="label_btn clearfix"><span id="125612008" class="cc"></span><label>毛巾</label></div>
<div class="label_btn clearfix"><span id="125612009" class="cc"></span><label>鸭翅</label></div>
<button class="indexBtn" id="loadBtn">加载</button>
</div>
<!-- 开始时间和结束时间 -->
<div class="second_box">
<label>开始时间:</label> <input type="text" id="begin" placeholder="开始时间" value=""> --
<label>结束时间:</label> <input type="text" id="end" placeholder="结束时间" value="">
<!-- 类型下拉框 -->
<select id="selectOption">
<option>类目属性</option>
<option>活跃店铺</option>
<option>宝贝</option>
</select>
</div>
</div>
<script>
//切换选项卡
$(".label_btn>span").click(function(){
$(this).toggleClass("butActive");
});
function index(param)
{
$.ajax({
url:"http://211.95.60.40:16868/yanshudemo/shop",
type:'POST',
data:{
type: param
},
dataType:"json",
success:function(data){
console.log(data.columns.length);
},error:function(){
alert("数据开小差了");
}
})
}
//初始化选中项
var selectop = $("#selectOption option:selected").val();
index(selectop);
下拉框改变事件
$("#selectOption").change(function(){
var selectop=$("#selectOption").val();
index(selectop);
})
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><script type="text/javascript" src="jquery-3.0.0.min.js"></script>
</head>
<style>
.container {
width: 800px;
height: 600px;
border: 2px solid #000;
}
.grade-list {
height: 40px;
border-bottom: 1px solid #999;
margin-bottom: 20px;
margin-top: 20px;
}
.grade-list span{
display:block;
width:20px;
height:20px;
border: 1px solid #000;
/*浮动一次*/
float: left;
}
.label_btn {
/*浮动2次*/
float: left;
margin-right: 10px;
}
.butActive {
background: violet;
}
.second_box {
position: relative;
}
</style>
<body>
<!-- 叶子类目展示内容-->
<div class="container">
<!-- 叶子类目展示内容-->
<div class="grade-list clearfix" id="tel">
<div class="label_btn clearfix"><span id="50023643" class="cc"></span><label>棒球鞋</label></div>
<div class="label_btn clearfix"><span id="50005900" class="cc"></span><label>足球鞋</label></div>
<div class="label_btn clearfix"><span id="50023643" class="cc"></span><label>球鞋</label></div>
<div class="label_btn clearfix"><span id="50005900" class="cc"></span><label>女生上衣</label></div>
<div class="label_btn clearfix"><span id="125612007" class="cc"></span><label>男生上衣</label></div>
<div class="label_btn clearfix"><span id="125612008" class="cc"></span><label>毛巾</label></div>
<div class="label_btn clearfix"><span id="125612009" class="cc"></span><label>鸭翅</label></div>
<button class="indexBtn" id="loadBtn">加载</button>
</div>
<!-- 开始时间和结束时间 -->
<div class="second_box">
<label>开始时间:</label> <input type="text" id="begin" placeholder="开始时间" value=""> --
<label>结束时间:</label> <input type="text" id="end" placeholder="结束时间" value="">
<!-- 类型下拉框 -->
<select id="selectOption">
<option>类目属性</option>
<option>活跃店铺</option>
<option>宝贝</option>
</select>
</div>
</div>
<script>
//切换选项卡
$(".label_btn>span").click(function(){
$(this).toggleClass("butActive");
});
function index(param)
{
$.ajax({
url:"http://211.95.60.40:16868/yanshudemo/shop",
type:'POST',
data:{
type: param
},
dataType:"json",
success:function(data){
console.log(data.columns.length);
},error:function(){
alert("数据开小差了");
}
})
}
//初始化选中项
var selectop = $("#selectOption option:selected").val();
index(selectop);
下拉框改变事件
$("#selectOption").change(function(){
var selectop=$("#selectOption").val();
index(selectop);
})
</script>
</body>
</html>