js如何实现A 标签 点击 隐藏一个 或者多个DIV 不需跳转页面 或者其他标签也可以 只要实现这个功能
1个回答
展开全部
这个一般是用在列表就是模板有循环输出的,如果知道是固定的就没多大意思了,我这边给你部分代码,主要给你思路
//美食分类
<!--{foreach from = $list_cates item=list}-->
<div class="filtersingle"><label style="color:#0033FF" onClick="toggle({$list.cate_id})">{$list.cate_name}</label></div>
<!--{/foreach}-->
<div class="filtersingle"><label style="color:#0033FF" onClick="toggle(0)">所有美食</label></div>
//这是模板美食列表注意DIV的ID
<!--{foreach from=$goods_list item=good_list key=key}-->
<div id="tab{$key}"> 列表内容....</div>
<!--{/foreach}-->
//一个隐藏域
<input type="hidden" id="cate_id_str" value="{$cate_id_str}">
说明 :这个{$cate_id_str}是那些{$key}的值(同时也和上面的这个{$list.cate_id}的相等,就是分类的id,这个美食列表的键值就是对应的分类id的值)的字符串(用逗号隔开,可以在后台处理好)
好了,js代码
<script type="text/javascript">
function toggle(num){
var str = $('#cate_id_str').val();//得到那个ID的字符串
var str_array = new Array();
str_array = str.split(','); //分割成数组
for(var i=0;i < str_array.length;i++){
if(str_array[i]!='' && str_array[i]!=null){
//这个是显示所有分类下的美食列表
if(num==0){
var id='#tab'+str_array[i];//获取对应的DIV的id(就是tab1,tab2等等)
$(id).show();
}else{
if(str_array[i] !=num){
var id='#tab'+str_array[i];//非当前点击的美食分类
$(id).hide();//隐藏对应的美食列表
var id='#tab'+num;//点击当前的美食分类
$(id).show();//显示对应的美食列表
}
}
}
}
}
</script>
好了,应该能看明白了吧
//美食分类
<!--{foreach from = $list_cates item=list}-->
<div class="filtersingle"><label style="color:#0033FF" onClick="toggle({$list.cate_id})">{$list.cate_name}</label></div>
<!--{/foreach}-->
<div class="filtersingle"><label style="color:#0033FF" onClick="toggle(0)">所有美食</label></div>
//这是模板美食列表注意DIV的ID
<!--{foreach from=$goods_list item=good_list key=key}-->
<div id="tab{$key}"> 列表内容....</div>
<!--{/foreach}-->
//一个隐藏域
<input type="hidden" id="cate_id_str" value="{$cate_id_str}">
说明 :这个{$cate_id_str}是那些{$key}的值(同时也和上面的这个{$list.cate_id}的相等,就是分类的id,这个美食列表的键值就是对应的分类id的值)的字符串(用逗号隔开,可以在后台处理好)
好了,js代码
<script type="text/javascript">
function toggle(num){
var str = $('#cate_id_str').val();//得到那个ID的字符串
var str_array = new Array();
str_array = str.split(','); //分割成数组
for(var i=0;i < str_array.length;i++){
if(str_array[i]!='' && str_array[i]!=null){
//这个是显示所有分类下的美食列表
if(num==0){
var id='#tab'+str_array[i];//获取对应的DIV的id(就是tab1,tab2等等)
$(id).show();
}else{
if(str_array[i] !=num){
var id='#tab'+str_array[i];//非当前点击的美食分类
$(id).hide();//隐藏对应的美食列表
var id='#tab'+num;//点击当前的美食分类
$(id).show();//显示对应的美食列表
}
}
}
}
}
</script>
好了,应该能看明白了吧
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询