你用jQuery写下的第一个功能是什么

记得刚开始使用jQuery的时候,写了一个tab菜单切换的功能

效果预览:

完整代码:

js 复制代码
<!DOCTYPE html>
 <html>
 <head>
 <title>jquery实现tab菜单切换内容(精简版)</title>
 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 </head>
 <body>
     <!-- 这是菜单 -->
     <div>
         <span style="background-color: red;cursor: pointer;" list="0" onclick="tab(this)" >我是A</span>
         <span style="background-color: blue;cursor: pointer;" list="1" onclick="tab(this)" >我是B</span>
         <span style="background-color: orange;cursor: pointer;" list="2" onclick="tab(this)" >我是C</span>
         <span style="background-color: green;cursor: pointer;" list="3" onclick="tab(this)" >我是D</span>
    </div>
    <!-- 这是菜单对应的内容 -->
    <div class="content">
       <div style="background-color: red" onclick="cont(this)">我是A的内容</div>
       <div style="background-color: blue;display: none"   onclick="cont(this)" >我是B的内容</div>
       <div style="background-color: orange;display: none" onclick="cont(this)" >我是C的内容</div>
       <div style="background-color: green;display: none"  onclick="cont(this)" >我是D的内容</div>
    </div>

</body>
</html>
<script type="text/javascript">

    //点击菜单执行函数
    function tab(param) {
        var sp_an=$(param).attr('list');//获取被点击菜单的list属性值(0,1,2,3)
        $('.content').children('div').eq(sp_an).click();//点击菜单后,对应的内容被点击,从而实现展示
        //使用click()方法模拟点击事件,触发下面的cont函数
      }

    //这个函数的触发是通过点击菜单的时候触发的
    function cont(param){
        $(param).show();//被选中的内容显示
        $(param).siblings().hide();//没有被选中的内容隐藏
    }

</script>

重点总结:

1.span标签中list属性值(0,1,2,3)用来与四个div内容一一对应

2.siblings()。在cont函数中使用siblings()方法来获取除了被选中元素的其他兄弟元素。siblings()是jquery的方法

相关推荐
LaoZhangAI29 分钟前
Claude MCP模型上下文协议详解:AI与外部世界交互的革命性突破【2025最新指南】
前端
LaoZhangAI30 分钟前
2025最全Cursor MCP实用指南:15个高效工具彻底提升AI编程体验【实战攻略】
前端
Kagerou1 小时前
vue3基础知识(结合TypeScript)
前端
市民中心的蟋蟀1 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭1 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试
carterwu1 小时前
各个大厂是怎么实现组件库和相应扩展的?基础组件、区块、页面
前端
Face1 小时前
promise 规范应用
前端
Mintopia1 小时前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face1 小时前
事件循环
前端·javascript
ONE_Gua1 小时前
chromium魔改——navigator.webdriver 检测
前端·后端·爬虫