展示列表信息（非使用前台框架）通过js隐藏显示切换实现

效果实例图

                     

实现思路

后台返回内容拼html，将所有内容展示出来查看，再点击是切换class属性进行样式控制展示格式，

 

切换样式代码实例

$(function () {
$(".rizuka_info").on("click",".li_hui",function () {
$(this).removeClass('li_hui').addClass('li_active').siblings().removeClass('li_active').addClass('li_hui');
//taocan = $(this).find("p").html();
$(this).children("span").show();
$(this).siblings().children("span").hide();
var index = $(this).index();
$(".riruka_xiangqing div").eq(index).show().siblings(".riruka_xiangqing div").hide();
});
});

 拼html代码实例

$(".rizuka_info ul").append('<li class="li_hui li_active"><p class="rizuka_p">'+results[int].setMeal+'</p><p id="taocanbianma" hidden="hidden">'+results[int].taocanbianma+'</p><span></span> </li>');
$(".riruka_xiangqing").append(results[int].remark);
$(".riruka_xiangqing div").eq(0).show().siblings(".riruka_xiangqing div").hide();

转载于:https://www.cnblogs.com/wutao123/p/9138438.html