有点简单阿
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选项卡</title> <link rel="stylesheet" href="11.css"> <script src="../jquery-3.6.0.js"></script> <script> $(document).ready(function(){ toJson = { lable : "li", topValue: ["周一","周二","周三","周四","周五","周六","周日"], buttonValue: [ "气温变化平稳,建议穿薄型T恤短裤等夏装", "昼夜温差极大,极易发生感冒,请特别注意增减衣服保暖防寒", "近期空气干燥,注意经常补充水分,以保身体健康", "请各单位、各部门对所在教学楼、办公楼积雪进行清理", "凡在南阳台安装自来水的住户,请保护好水管,以免水管冻裂产生不必要的麻烦", "扣紧门窗,免被强风吹开", "雾霾天气,请减少外出" ], topchange: "ok" }; for(i=0;i<toJson.topValue.length;i++){ $("#top").append('<li></li>'); $("#top").children().eq(i).html(toJson.topValue[i]) }; $("#top>li").click(function(){ $(this).css("color","white").siblings().css("color","black"); $("#button").html(toJson.buttonValue[$(this).index()]) }) }) </script> </head> <body> <div class="ChangeCard"> <div id="top"> </div> <div id="button"> </div> </div> </body> </html>
css
*{ margin: 0; list-style: none; } .ChangeCard{ width: 300px; height: 100px; background-color: red; margin: 100px auto; } #top{ /* margin: 0 auto; */ height: 30px; line-height: 30px; background-color: yellowgreen; text-align: center; } #top li{ display: inline; margin: 0 5px; cursor: pointer; } #button{ margin-top: 25px; text-align: center; } .oks{ color: white; } .oksbox{ display: none; }
实现效果