十分钟玩转jQuery---菜单切换

最新推荐文章于 2023-03-16 18:28:00 发布

lofate

最新推荐文章于 2023-03-16 18:28:00 发布

阅读量291

点赞数

分类专栏： JavaScript 前端笔记文章标签： javascript css 前端 jquery js

本文链接：https://blog.csdn.net/fate_sky8521/article/details/116900503

版权

笔记同时被 3 个专栏收录

37 篇文章 0 订阅

订阅专栏

前端

29 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

这是一个使用HTML、CSS和JavaScript编写的免费商城项目实例，展示了如何通过简单的DOM操作实现菜单与内容的动态切换。用户点击菜单项时，相应内容会显示，其他内容则隐藏，提供了一个简洁的交互体验。

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

这里给大家推荐一款免费迭代二开便捷的商城项目：源码直通车>>>

话不多说直接上实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            border: 1px solid #ccc;
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
            color: white;
        }
        .menu li:hover {
            cursor: pointer;
        }
        .menu a{
            padding: 11px;
        }
        .content{
            border: 1px solid #ccc;
            height: 300px;
            font-size: 30px;
        }
        .hide{
            display: none;
        }

        .current{
            background-color: #0099dd;
            color: black;
        }
    </style>
</head>
<body>
    <div class="tab_outer">
          <ul class="menu">
              <li xxx="c1" class="current" onclick="Tab(this);">菜单一</li>
              <li xxx="c2" onclick="Tab(this);">菜单二</li>
              <li xxx="c3" onclick="Tab(this);">菜单三</li>
          </ul>
          <div class="content">
              <div id="c1">内容一</div>
              <div id="c2" class="hide">内容二</div>
              <div id="c3" class="hide">内容三</div>
          </div>
    </div>

    <script src="../../jquery-1.12.4.js"></script>
    <script>
        function Tab(self) {
            $(self).addClass("current").siblings().removeClass("current");
            var x = "#" + $(self).attr("xxx");
            $(x).removeClass("hide").siblings().addClass("hide");
        }
    </script>
</body>
</html>