JQuery实现菜单切换--以百度地图的InfoWindow为例

最新推荐文章于 2022-02-25 16:39:55 发布

濮阳梦雪

最新推荐文章于 2022-02-25 16:39:55 发布

阅读量1.2k

点赞数 1

分类专栏： JQuery

本文链接：https://blog.csdn.net/zlj_blog/article/details/23682147

版权

本文通过JQuery实现了一种菜单切换效果，点击一级菜单会显示相应内容。利用JQuery简化DOM操作，示例中一级菜单触发显示其对应内容，可作为基本框架进行扩展以适应更多场景。

摘要由CSDN通过智能技术生成

在网页设计中，很多元素的外观显示与其真正的内部实现其实并不完全一致，正如前边qq的显示面板示例一样，给人的直观感觉有点小复杂，但其实质就是个ul。本文所示例的切换菜单也一样，外观看起来也有点复杂，但其实质很简单，同样可以通过ul实现。

本文使用JQuery来实现，相对于JavaScript来说，简化了DOM的很多操作，特别是选择器的使用，省去了循环选择元素。当然，首先你得引入JQuery，页面代码如下：

<!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" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>菜单切换</title>
    <meta name="description" content="" />
    <link href="Styles/myInfoWindow.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#nav li").click(function () {
                $(this).attr("class",