ul中的li标签切换选中状态样式和获取li选项中的值的获取

时间:2022-12-09 00:03:37
html 代码:

<ul class="J_tabs tab_but cu_li" id="lei">
<li class="current" value="1">参与用户</li>
<li value="2">抽奖</li>
<li value="3">新老玩家</li>
<li value="4">点击数</li>
<li value="5">帮砍用户机型</li>
<li value="6">砍价完成</li>
</ul>

<style>
ul.tab_but li.current {
    position: relative;
    background: #fff;
    border-bottom: 0;
    height: 26px;
    line_height: 27px;
    font-weight: 700;
}
</style>

js代码引用:

<script type="text/javascript">
$(function(){
// li CSS选中状态切换
$("#lei li").click(function() {
$(this).siblings('li').removeClass('current'); // 删除其他兄弟元素的样式
$(this).addClass('current'); // 添加当前元素的样式
})
$("li").click(function(){
var type=parseInt($(this).val());
//alert(type); // 这里能获取到当前点击的li标签当前的value值
$.ajax({
url:'/h5/k/ajax_get_chart',
type:'post',
data:{type:type},
dataType:'json',
success:function(resp){
alert(resp.data);
}
});
});
})

</script>