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

    点赞 评论
提交

相关推荐