页面中“全部产品”“进行中的产品”“即将开始的产品”“已结束的产品”可以点击,点击之后要求下方的内容随着变化。
7条回答 默认 最新
- 上官熊猫 2021-08-03 09:51关注
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" /> <meta name="renderer" content="webkit" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>html</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { padding: 100px; } ul { list-style: none; } .tab_list { display: flex; } .tab_list .item { line-height: 40px; padding: 0 20px; margin-right: 6px; background-color: #ebebeb; text-align: center; font-size: 16px; color: #4a6689; border-radius: 2px; cursor: pointer; transition: all 0.4s; } .tab_list .active { background-color: #15b9e2; color: #fff; } .content_list .item { display: none; min-height: 300px; border: 1px solid #ddd; } .content_list .active { display: block; } </style> </head> <body> <ul class="tab_list"> <li class="item active">全部产品</li> <li class="item">进行中产品</li> <li class="item">即将开始的产品</li> <li class="item">已结束产品</li> </ul> <ul class="content_list"> <li class="item active">全部产品的内容</li> <li class="item">进行中产品的内容</li> <li class="item">即将开始的产品的内容</li> <li class="item">已结束产品的内容</li> </ul> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script> //原生版本 // let tabs = document.querySelectorAll(".tab_list .item"); // let contents = document.querySelectorAll(".content_list .item"); // for (let i = 0; i < tabs.length; i++) { // tabs[i].onclick = function() { // tabs.forEach((item, index) => { // if (i === index) { // item.classList.add("active"); // } else { // item.classList.remove("active"); // } // }); // contents.forEach((item, index) => { // if (i == index) { // item.classList.add("active"); // } else { // item.classList.remove("active"); // } // }); // }; // } // jQuery版本 $(".tab_list").on("click", "li", function() { let index = $(this).index(); $(this) .addClass("active") .siblings() .removeClass("active"); $(".content_list .item") .eq(index) .addClass("active") .siblings() .removeClass("active"); }); </script> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥30 Matlab打开默认名称带有/的光谱数据
- ¥50 easyExcel模板 动态单元格合并列
- ¥15 res.rows如何取值使用
- ¥15 在odoo17开发环境中,怎么实现库存管理系统,或独立模块设计与AGV小车对接?开发方面应如何设计和开发?请详细解释MES或WMS在与AGV小车对接时需完成的设计和开发
- ¥15 CSP算法实现EEG特征提取,哪一步错了?
- ¥15 游戏盾如何溯源服务器真实ip?需要30个字。后面的字是凑数的
- ¥15 vue3前端取消收藏的不会引用collectId
- ¥15 delphi7 HMAC_SHA256方式加密
- ¥15 关于#qt#的问题:我想实现qcustomplot完成坐标轴
- ¥15 下列c语言代码为何输出了多余的空格