基于jQuery实现选项卡效果

时间：2021-05-25

选项卡，不多说了，做不做网络的都知道，我学的比较晚，现在发一个选项卡制作的代码

效果下图所示：

源代码：

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta name="keywords" content=" keywords" /> <meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.4.2.min.js"></script><style type="text/css"> body{font-size:13px} ul,li{margin:0;padding:0;list-style:none} #menu li{text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer} #menu li.tabFocus{width:50px;font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative} #content{width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px} #content li{display:none} #content li.conFocus{display:block}</style><body><script type="text/javascript"> $(function(){ $('#menu li').each(function(index){ $(this).click(function(){ $('#menu li.tabFocus').removeClass('tabFocus'); $(this).addClass('tabFocus'); $('#content li:eq('+index+')').show().siblings().hide(); }) }); });</script><ul id="menu"> <li class="tabFocus">家居</li> <li>电器</li> <li>二手</li></ul><ul id="content"> <li class="conFocus">这是家居的内容</li> <li>这是电器的内容</li> <li>这是家居的内容</li></ul></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章