qq_57207581
世界赖床锦标赛冠军
2021-06-07 12:47
采纳率: 90%
浏览 45

怎样实现点击按钮切换年份

有一排年份,旁边是个按钮 点击按钮就把这派年份换成其他的年份  这个怎么实现

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • qq_41728631
    风雪一更 2021-06-07 13:50
    已采纳

    直接获取每个年份,转成数值,加5,然后再放回去,就好了。参考代码给你贴一下,样式你自己调吧:

    	<body>
    		<div class="wrap">
    			<div class="year"><span class="num">2020</span>年</div>
    			<div class="year"><span class="num">2019</span>年</div>
    			<div class="year"><span class="num">2018</span>年</div>
    			<div class="year"><span class="num">2017</span>年</div>
    			<div class="year"><span class="num">2016</span>年</div>
    		</div>
    		<button class="add">上5年</button>
    		<button class="min">下5年</button>
    	</body>
    	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		$(".add").click(function () {
    			for (var i=0;i<$('.num').length;i++) {
    				var year = Number($('.num').eq(i).text())+5;
    				$('.num').eq(i).text(year);
    			}
    		})
    		$(".min").click(function () {
    			for (var i=0;i<$('.num').length;i++) {
    				var year = Number($('.num').eq(i).text())-5;
    				$('.num').eq(i).text(year);
    			}
    		})
    	</script>
    点赞 评论
  • weixin_44058725

    有效果图吗?

    <!DOCTYPE html>
    <html lang="en">
    
    <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>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .box {
                width: 200px;
                height: 20px;
                display: flex;
                overflow: hidden;
            }
    
            .box>div {
                width: 40px;
                height: 20px;
            }
    
            .cur {
                background: red;
            }
        </style>
    </head>
    
    <body>
        <button id="pret">上一页</button>
        <div class="box">
    
        </div>
        <button id="next">下一页</button>
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        let year = ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"];
        var page = 0;
        var num = 5;
        var zPage = modFoat(year.length / num); //总页数 只要有小数就加一
        a(year, num, page)
        $('#pret').click(() => {
            page--
            if (page < 0) { //page不能小于0
                return
            }
            a(year, num, page);
        })
        $("#next").click(() => {
            page++
            if (page > zPage - 1) { //页数不能大于总页数
                page--
                return
            }
            a(year, num, page);
        })
        function modFoat(v) {
            var _max = parseInt(v) + 1;
            if (_max - v < 1) {
                return _max;
            }
            return v;
        }
        function a(arr, num, page) {
            if (arr.lenth == 0) {
                return
            }
            let start = page * num; //开始下标
            console.log(start, "0877")
            let yearArr = arr.slice(start, start + num);//截取数组
            var box = $('.box');
            var html = "";
            // console.log(zPage, "00")
            for (var i = 0; i < yearArr.length; i++) {
                html += `<div class="year">${yearArr[i]}</div>`
            }
            box.html(html);
    
            $(".box>div").eq(0).addClass("cur"); //默认页数的第一个年份标红
        }
        $(".box").on("click", "div", function () { //利用事件委托实现点击年份切换类名
            $(".box>div").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
        })
    </script>
    
    </html>
    点赞 评论
  • qq_57207581

    大概这样  把这五个换掉

    点赞 评论
  • weixin_43392489

    这不是一个tab栏切换吗 绑定类名 点击控制样式的切换

    点赞 评论
  • qq_45286427
    qq_45286427 2021-06-07 13:37

    你可以在年份下边加一个div 作为背景,然后给他定位,点击右边的按钮让背景left一个年份的大小

    也可以直接这样写,点击哪个年份哪个年份添加背景yang shi

    点赞 评论

相关推荐