站长资源网络编程
javascript css红色经典选项卡效果实现代码
简介本文实例为大家分享了js选项卡效果的具体实现代码，供大家参考，具体内容如下效果图：实现代码： 无标题文档</t</div>
<div class="news_infos"><div id="MyContent"><p>本文实例为大家分享了js选项卡效果的具体实现代码，供大家参考，具体内容如下</p>
<p><strong>效果图：</strong></p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2016517160803081.jpg');"><img src="/UploadFiles/2021-04-02/2016517160803081.jpg" alt="javascript css红色经典选项卡效果实现代码" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p><strong>实现代码：</strong></p>
<div class="htmlcode">
<pre class="brush:xhtml;">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ font-size:12px;}
.sec,.sec1{ cursor:pointer;}
.sec{ color:#FFFFFF; font-weight:bold; text-align:center; background-color:#990000;}
.sec1{ color:#990000; text-align:center; background-color:#FFFFFF;}
div{ line-height:22px;}
</style>
<script language="javascript">
function $(id){
return document.getElementById(id);
}
function xxk(num,id,ii,iii)
{
//alert(ii);
var dq;
for(var i=1;i<=num;i++)
{
if(i==id){
dq=$(ii+i).className='sec'; //当前选项
$(iii+i).style.display="block";
}
else
{
dq=$(ii+i).className='sec1';
$(iii+i).style.display="none";
}
}
}
</script>
</head>
<body>
<table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000">
<tr>
<td class="sec" id="t1" onmouseover="xxk(5,1,'t','tt')">选项卡1</td>
<td bgcolor="#FFFFFF" id="t2" class="sec1" onmouseover="xxk(5,2,'t','tt')">选项卡2</td>
<td bgcolor="#FFFFFF" id="t3" class="sec1" onmouseover="xxk(5,3,'t','tt')">选项卡3</td>
<td bgcolor="#FFFFFF" id="t4" class="sec1" onmouseover="xxk(5,4,'t','tt')">选项卡4</td>
<td bgcolor="#FFFFFF" id="t5" class="sec1" onmouseover="xxk(5,5,'t','tt')">选项卡5</td>
</tr>
<tr>
<td colspan="5" bgcolor="#FFFFFF">
<div id="tt1">选项卡1月在上班</div>
<div id="tt2" style="display:none;">选项卡2月在上班</div>
<div id="tt3" style="display:none;">选项卡3月在上班</div>
<div id="tt4" style="display:none;">选项卡4月在上班</div>
<div id="tt5" style="display:none;">选项卡5月在上班</div>
</td>
</tr>
</table>
<br />
<table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000">
<tr>
<td class="sec" id="ts1" onclick="xxk(4,1,'ts','tts')">选项卡1</td>
<td bgcolor="#FFFFFF" id="ts2" class="sec1" onclick="xxk(4,2,'ts','tts')">选项卡2</td>
<td bgcolor="#FFFFFF" id="ts3" class="sec1" onclick="xxk(4,3,'ts','tts')">选项卡3</td>
<td bgcolor="#FFFFFF" id="ts4" class="sec1" onclick="xxk(4,4,'ts','tts')">选项卡4</td>
</tr>
<tr>
<td colspan="4" bgcolor="#FFFFFF">
<div id="tts1">选项卡1月在上班</div>
<div id="tts2" style="display:none;">选项卡2月在上班</div>
<div id="tts3" style="display:none;">选项卡3月在上班</div>
<div id="tts4" style="display:none;">选项卡4月在上班</div>
</td>
</tr>
</table>
</body>
</html>
</pre>
</div>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助。</p></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="/3g/1/108284.html" title="jQuery 获取屏幕高度、宽度的简单实现案例">jQuery 获取屏幕高度、宽度的简单实现案例</a></p>
<p>下一篇：<a href="/3g/1/108286.html" title="JS获取IMG图片高宽的简单实例">JS获取IMG图片高宽的简单实例</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li>
<li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li>
<li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li>
<li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li>
<li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li>
<li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li>
<li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li>
<li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">标签云</h2><ul><a href="/search.asp?key=1080P高清&m=1">1080P高清<span>(5)</span></a><a href="/search.asp?key=高清电影&m=1">高清电影<span>(5)</span></a><a href="/search.asp?key=百度云盘&m=1">百度云盘<span>(5)</span></a><a href="/search.asp?key=网盘下载&m=1">网盘下载<span>(4)</span></a><a href="/search.asp?key=破解软件&m=1">破解软件<span>(4)</span></a><a href="/search.asp?key=绿色软件&m=1">绿色软件<span>(4)</span></a><a href="/search.asp?key=磁力链接&m=1">磁力链接<span>(3)</span></a><a href="/search.asp?key=强度天梯&m=1">强度天梯<span>(3)</span></a><a href="/search.asp?key=福利资源&m=1">福利资源<span>(2)</span></a><a href="/search.asp?key=王者荣耀&m=1">王者荣耀<span>(2)</span></a><a href="/search.asp?key=黑钻活动&m=1">黑钻活动<span>(2)</span></a><a href="/search.asp?key=WPS会员&m=1">WPS会员<span>(2)</span></a><a href="/search.asp?key=刷图排行&m=1">刷图排行<span>(1)</span></a><a href="/search.asp?key=网盘限速&m=1">网盘限速<span>(1)</span></a><a href="/search.asp?key=鬼灭之刃&m=1">鬼灭之刃<span>(1)</span></a><a href="/search.asp?key=免费韩国漫画&m=1">免费韩国漫画<span>(1)</span></a><a href="/search.asp?key=宫本重做&m=1">宫本重做<span>(1)</span></a><a href="/search.asp?key=免费动漫&m=1">免费动漫<span>(1)</span></a></ul></div>
</div>
<div class="sidebar">
友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a>
</div>
</article>
<footer>
<p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p>
</footer>
<script src="/images3g/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>