你用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的方法

相关推荐
zhanshuo11 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang12 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil14 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录20 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672221 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少25 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639973 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫