效果演示
需求分析
需求
- 当我们单击不同的卡片时，显示的内容也不同
- 给选项卡添加动态的导航菜单、图片、内容
- 选项卡导航菜单、图片、介绍通过后台数据源动态显示
- 选择某一人物时，人物的图片和人物的介绍一并展示
分析
- 代码块都有简单注释，看不懂的地方百度
- 复制代码后要注意图片路径，替换成你的
- 没有本地JQ代码块的可以通过外链引入
- JS的数据源就相当于后台，改数据=改前台
寄语
朋友说：你没有以前潇洒了，似乎眼中凌乱了沧桑
我笑了笑，忽然红了一下眼眶成长两个字，连偏旁都没有
书写代码
JQ外链代码块
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>HTML代码块
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选项卡功能</title> <script src="js/jQuery3.6.1.js"></script> <script src="js/index.js"></script> <style type="text/css"> *{ margin: 0 auto; } img:hover{ transform: scale(1.1); } .overAll{ width: 950px; } .title{ height: 50px; background-color: cornflowerblue; } .title ul li{ list-style: none; float: left; font-size: 19px; padding: 10px 20px 10px 20px; cursor: pointer; } .title ul li:hover{ color: #fff; } .centent{ padding: 0px 20px 10px 20px; background-color: #ccc; } .tishibox{ padding-top: 10px; padding-bottom: 10px; } .tishi{ font-size: 20px; font-weight: bolder; } .tishibt{ width: 20px; height: 5px; background-color: #fff; margin-right: 5px; } .centent_img{ text-align: center; margin-bottom: 20px; } .centent_img img{ width: 440px; height: 250px; } .centent_p p{ text-indent: 2em; color: #ff007f; } .centent_lr{ height: 300px; } .centent_left{ float: left; margin-right: 10px; } .centent_right{ float: left; margin-left: 10px; } .centent_qt img{ width: 440px; height: 250px; } .footer{ height: 50px; background-color: aqua; text-align: center; } .footer p{ padding-top: 15px; } .checked{ background-color: #55aa7f; border-radius: 0px 20px 0px 20px; color: white; } </style> </head> <body> <!-- 全局div --> <div class="overAll"> <!-- 导航标题的div --> <div class="title"> <ul> </ul> </div> <!-- 内容的div --> <div class="centent"> <!-- 内容第一个div --> <div class="centent_centent"> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">人物图片</span> </div> <!-- 人物的图片 --> <div class="centent_img"> <!-- <img src="" alt=""> --> </div> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">人物介绍</span> </div> <!-- 人物的介绍 --> <div class="centent_p"> <!-- <p>这个是人物介绍</p> --> </div> </div> <!-- 内容第二个div --> <div class="centent_lr"> <!-- 第二个div里面的左边div --> <div class="centent_left"> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">梅利号</span> </div> <!-- 图片内容 --> <div class="centent_qt"> <img src="img/mlh.jpg"> </div> </div> <!-- 第二个div里面的右边div --> <div class="centent_right"> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">阳光号</span> </div> <!-- 图片内容 --> <div class="centent_qt"> <img src="img/ygh.jpg"> </div> </div> </div> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">草帽海贼旗</span> </div> <!-- 图片内容 --> <div class="centent_qt" style="text-align: center;"> <img src="img/caomaohzq.jpg" alt=""> </div> </div> <!-- 底部div --> <div class="footer"> <p>版权声明</p> </div> </div> </body> </html>JavaScript代码块
//窗体加载完成事件 $(function(){ //数据源 let admin_nav = [{ title : "路飞", content : "蒙奇·D·路飞，“草帽一伙”的船长，绰号大船长·四皇·“草帽小子”。东海出身，悬赏金30亿贝里。 [83] 是食用了橡胶果实的橡胶人（五老星认为这是人人果实·幻兽种·尼卡形态）。“草帽一伙”的创立者。是被称作“极恶的世代”中登陆香波地群岛的11位超新星的其中一位。梦想成为“海贼王”，以此为目标在大海上航行。", images : "img/lufei.jpg" },{ title : "索隆", content : "罗罗诺亚·索隆，“草帽一伙”的战斗员，绰号剑豪“海贼猎人”。东海出身，悬赏金11亿1100万贝里。是使用三把刀战斗的三刀流剑士。“草帽一伙”第一位加入的成员。 [42] 与船长路飞一样是被称作“极恶的世代”中登陆香波地群岛的11位超新星的其中一位。梦想成为“世界第一大剑豪”，以此为目标在大海上航行。", images : "img/suolong.jpg" },{ title : "山治", content : "草帽团厨师，“草帽一伙”的航海士，绰号“小贼猫”。东海出身，悬赏金3亿6600万贝里。使用天候棒结合气象科学进行战斗。“草帽一伙”第二位加入的成员。 [41] 梦想绘制“全世界的地图”，以此为目标在大海上航行。", images : "img/shanzhi.jpg" },{ title : "甚平", content : "草帽团船舵手，“草帽一伙”的船匠，绰号“铁人·弗兰奇”。南海出身，悬赏金3亿9400万贝里。使用改造后的身体以及自制兵器进行战斗。“草帽一伙”第七位加入的成员。梦想“乘坐自己制作的梦想之船绕伟大航路一周”，以此为目标在大海上航行。 ", images : "img/shenping.jpg" },{ title : "娜美", content : "草帽团航海士，“草帽一伙”的航海士，绰号“小贼猫”。东海出身，悬赏金3亿6600万贝里。使用天候棒结合气象科学进行战斗。“草帽一伙”第二位加入的成员。 [41] 梦想绘制“全世界的地图”，以此为目标在大海上航行。", images : "img/namei.jpg" },{ title : "罗宾", content : "草帽团考古学家，“草帽一伙”的考古学家，绰号“恶魔之子”。西海出身，悬赏金9亿3000万贝里。食用了花花果实的能力者。“草帽一伙”第六位加入的成员。梦想“找到空白的100年历史”，以此为目标在大海上航行。", images : "img/luobin.jpg" },{ title : "布鲁克", content : "草帽团音乐家，“草帽一伙”的船匠，绰号“铁人·弗兰奇”。南海出身，悬赏金3亿9400万贝里。使用改造后的身体以及自制兵器进行战斗。“草帽一伙”第七位加入的成员。梦想“乘坐自己制作的梦想之船绕伟大航路一周”，以此为目标在大海上航行。 ", images : "img/buluke.jpg" },{ title : "乌索普", content : "草帽团狙击手，“草帽一伙”的航海士，绰号“小贼猫”。东海出身，悬赏金3亿6600万贝里。使用天候棒结合气象科学进行战斗。“草帽一伙”第二位加入的成员。 [41] 梦想绘制“全世界的地图”，以此为目标在大海上航行。", images : "img/wusuopu.jpg" },{ title : "乔巴", content : "草帽团船医，“草帽一伙”的船医，绰号“爱吃棉花糖的乔巴”。伟大航路出身，悬赏金1000贝里。是食用了人人果实的驯鹿。“草帽一伙”第五位加入的成员。梦想“成为万能药”，以此为目标在大海上航行。", images : "img/qiaoba.jpg" },{ title : "弗兰奇", content : "草帽团船匠，“草帽一伙”的船匠，绰号“铁人·弗兰奇”。南海出身，悬赏金3亿9400万贝里。使用改造后的身体以及自制兵器进行战斗。“草帽一伙”第七位加入的成员。梦想“乘坐自己制作的梦想之船绕伟大航路一周”，以此为目标在大海上航行。", images : "img/fulanqi.jpg" }] //渲染页面 把数据源的数据显示出来 for (var i = 0; i < admin_nav.length; i++) { var str = "<li>"+ admin_nav[i].title +"</li>"; $(".title>ul").append(str); } //默认的内容显示 var strP = "<p>"+ admin_nav[0].content +"</p>"; $(".centent_p").html(strP); //默认的图片显示 var strImg = "<img src="+ admin_nav[0].images +">"; $(".centent_img").html(strImg); $(".title>ul>li").eq(0).addClass("checked"); $(".title>ul>li").on("click",function(){ $(".title>ul>li").removeClass("checked"); $(this).addClass("checked"); var index = $(this).index(); //对应的内容显示 var strP = "<p>"+ admin_nav[index].content +"</p>"; $(".centent_p").html(strP); //对应的图片显示 var strImg = "<img src="+ admin_nav[index].images +">"; $(".centent_img").html(strImg); }) })
页面效果
评论 (0)