当前位置：网站首页 > 资源显示

jstab切换效果，区块切换JS代码

发布时间：2017/5/1 12:05:47 / 最后修改：2018-11-29 23:33:24 / 浏览：768

自己写的，比较简陋，但是能实现功能，主要就是遍历下所有块的ID，然后控制他们的CSS（显示还是影藏，变换CSS效果）

CSS自己写吧，只贴了TAB轮换的代码部分，如果是4个块切换，那么函数 cBoxChange('sboxc',9,1) 第二个参数就应该是5

后续补充：在实际项目过程中，当控制TR 表格的显示和影藏的时候，发现切换的时候表格布局会错位，需要把代码中的显示控制 .style.display='block' 改为 .style.display='' （去掉 block 直接写空格） --------- by : 2018-11-29

完整代码（代码框可以往下拉高显示）：

<div class="cboxa">
<a href="#" class="on" onMouseOver="cBoxChange('sboxc',9,1)" id="sboxc_1">热门推荐</a>
<a href="#" onMouseOver="cBoxChange('sboxc',9,2)">近期活动</a>
<a href="#" onMouseOver="cBoxChange('sboxc',9,3)">视频中心</a>
<a href="#" onMouseOver="cBoxChange('sboxc',9,4)">世鼎服务</a>
<a href="#" onMouseOver="cBoxChange('sboxc',9,5)">旅游机构</a>
<a href="#" onMouseOver="cBoxChange('sboxc',9,6)">医疗机构</a>
<a href="#" onMouseOver="cBoxChange('sboxc',9,7)">奢侈品机构</a>
<a href="#" onMouseOver="cBoxChange('sboxc',9,8)">远程监控</a>
</div>

<ul class="cbox_c" id="sboxcC_1">11111</ul>
<ul class="cbox_c" id="sboxcC_2" style="display:none">暂无推荐</ul>
<ul class="cbox_c" id="sboxcC_3" style="display:none">暂无推荐</ul>
<ul class="cbox_c" id="sboxcC_4" style="display:none">暂无推荐</ul>
<ul class="cbox_c" id="sboxcC_5" style="display:none">暂无推荐</ul>
<ul class="cbox_c" id="sboxcC_6" style="display:none">暂无推荐</ul>
<ul class="cbox_c" id="sboxcC_7" style="display:none">暂无推荐</ul>

// JavaScript Document =========================

function cBoxChange(boxname,linum,myid){
	for(i=1;i<linum;i++)
	{
		eval("document.getElementById('"+boxname+"_"+i+"').className=''");
		eval("document.getElementById('"+boxname+"C_"+i+"').style.display='none'");
	 }  
		eval("document.getElementById('"+boxname+"_"+myid+"').className='on'");//变化主标题的背景
		eval("document.getElementById('"+boxname+"C_"+myid+"').style.display='block'");
}

附件资源（免费）

您尚未登录，暂时无法查阅资源！立即登录

插播广告区

发表评论

您尚未登录，暂时无法发表评论。立即登录

暂无任何评论

推荐资源更多 >>

付费资源更多 >>

广告区