点击导航栏切换不同的页面

时间：2024-03-19 13:27:00

实现效果
点击导航栏切换不同的页面
（因为无法上传视频，做成gif之后又很模糊，只能放在百度网盘里，又因为网盘维护中一定要提取码，而且我自己试了下，貌似看不了，也是很无奈，只能上gif了，也可以运行代码看效果）

html代码（ 注意哦： li的id和p的id是相互对应的）


  <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代码

/* 导航栏 */

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代码(关键)

        $(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")
        })

记得引入jquery

 <script src='https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js'></script>

一直以来碰到这个都不会写，总是看别人的，然后第二次还是不会。这一次自己试着写了一个，希望对和我一样不会写的小白有个帮助，做参考之用。也许在大神眼里我的代码些许幼稚，并且繁琐。希望不足之处，大神们可以多多指点，不吝赐教。

相关文章