<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery实现菜单切换</title> <mce:script src="../脚本/jquery-1.3.2.min.js" mce_src="脚本/jquery-1.3.2.min.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $(function(){ var $div=$("div.title span"); $div.bind("click",function(){ $(this).addClass("select").siblings().removeClass("select"); var $index=$div.index(this); $(".content div").eq($index).show().siblings().hide(); }) }) // --></mce:script> <mce:style type="text/css"><!-- .title { font-size:12px; width:100px; border:1px black; border-style:ridge; } .select { color:Aqua; } .content { font-size:14px; color:Maroon; border-color:Black; border-style:ridge; border:1px; width:100px; height:100px; } .content a { width:100px; height:100px; } .hide { display:none; } .selected { background-color:Red; } --></mce:style><style type="text/css" mce_bogus="1"> .title { font-size:12px; width:100px; border:1px black; border-style:ridge; } .select { color:Aqua; } .content { font-size:14px; color:Maroon; border-color:Black; border-style:ridge; border:1px; width:100px; height:100px; } .content a { width:100px; height:100px; } .hide { display:none; } .selected { background-color:Red; } </style> </head> <body> <div> <div class="title"> <span>体育</span> <span>娱乐</span> <span>Jquery</span> </div> <div class="content"> <div>体育信息就这这里www.163.com</div> <div class="hide">娱乐就这娱乐星空卫视</div> <div class="hide">blog.csdn.net/ws_hgo</div> </div> </div> </body> </html>
jquery实现菜单切换
最新推荐文章于 2022-02-14 15:33:24 发布
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
