jquery实现菜单切换

最新推荐文章于 2023-12-26 21:16:38 发布

原创最新推荐文章于 2023-12-26 21:16:38 发布 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #border #class #function #xhtml #娱乐

JQuery 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的菜单切换效果。通过简单的HTML结构和jQuery的事件绑定，实现了菜单项点击时显示对应的内容并切换样式的效果。该示例展示了如何利用jQuery简化DOM操作和事件处理。

<!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"></mce:script> <mce:style type="text/css"></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.youkuaiyun.com/ws_hgo</div> </div> </div> </body> </html>