实现效果
(由于没法上传视频,作成gif以后又很模糊,只能放在百度网盘里,又由于网盘维护中必定要提取码,并且我本身试了下,貌似看不了,也是很无奈,只能上gif了,也能够运行代码看效果)css
html代码( 注意哦: li的id和p的id是相互对应的)html
<div class="navbar"> <ul> <li id="day01">星期一</li> <li id="day02">星期二</li> <li id="day03">星期三</li> <li id="day04">星期四</li> <li id="day05">星期五</li> <li id="day06">星期六</li> <li id="day07">星期日</li> </ul> <div class="showTime"> <span>请先选择一个日期哦!</span> <p id="content01">上班的第一天</p> <p id="content02">上班的次日</p> <p id="content03">上班的第三天</p> <p id="content04">上班的第四天</p> <p id="content05">上班的第五天</p> <p id="content06">上班的第六天</p> <p id="content07">休息天!!!</p> </div>
css代码jquery
/* 导航栏 */ ul { list-style: none; } ul{ display: flex; flex-direction: row; padding: 0; margin: 0; } ul li { width: 80px; height: 50px; background: #abcdef; text-align: center; line-height: 50px; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; box-shadow: 3px 3px 3px #eee;; border-right: 1px solid #f5f5f5; } .showTime{ width: 560px; height: 200px; border: 1px solid #ffff66; background:#adcefb; } .showTime p{ width: 100%; height:100%; margin: 0; } p:nth-child(2){ background: #bedcaf; } p:nth-child(3){ background: #efabcd; } p:nth-child(4){ background: #fabecd; } p:nth-child(5){ background: #afbedc; } p:nth-child(6){ background: #defacb; } p:nth-child(7){ background: #eafbcd; } p:nth-child(8){ background: #cafedb; } .navbar{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .touchOn{ background:#ff9966; font-size: 20px;font-weight: bold; } span{ font-size: 25px;font-weight: bold; color:#6699ff; }
js代码(关键)web
$(function(){ $(".showTime").find("p").hide();//先隐藏全部p元素 }) $("ul li").click(function () { if (!$(this).hasClass("touchOn")) {//$(this)表示所点击的元素,在这里极为好用 $(this).addClass("touchOn");//给所点击元素加上touchOn类 } $(this).siblings().removeClass("touchOn");//移除其余元素的touchOn类 var id = $(this).attr('id');//获取所点击元素的id id = id.slice(4, 5);//获取所点击元素的id的序号,方便与下文p的id对应 var showId = $(".showTime").find("p").eq((id - 1)).attr('id');//由于index从0开始,这里须id-1 showId='#'+showId; $(showId).show(); $(showId).siblings().hide();//注意!!!这里不能写$("showId") })
记得引入jqueryide
<script src='https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js'></script>
一直以来碰到这个都不会写,老是看别人的,而后第二次仍是不会。这一次本身试着写了一个,但愿对和我同样不会写的小白有个帮助,作参考之用。也许在大神眼里个人代码些许幼稚,而且繁琐。但愿不足之处,大神们能够多多指点,不吝赐教。svg