导航条点击居中

Html

Css


PC中预览请把浏览器宽度调小点，看效果

    
        
            {{item.title}}

ul,li {
	list-style:none;
	margin:0;
	padding:0;
}
ul {
	width:100%;
	height:50px;
	display:flex;
	align-content:center;
	overflow-x:scroll;
	overflow-y:hidden;
	white-space:nowrap;
	/* ul中的内容不换行 */
}
ul li {
	display:inline-block;
	line-height:50px;
	padding:0 10px;
	font-size:16px;
	color:#000000;
}
.active {
	color:red;
	border-bottom:2px solid red;
}

new Vue({
    el: '#vertical-content',
    data: {
        tabidex: 0,
        classifyLeft: [{
                id: 1,
                title: '中式快餐'
            },
            {
                id: 2,
                title: '饮品'
            },
            {
                id: 3,
                title: '小吃'
            },
            {
                id: 4,
                title: '甜品烘焙'
            },
            {
                id: 5,
                title: '西式快餐'
            },
            {
                id: 6,
                title: '海鲜'
            },
            {
                id: 7,
                title: '烤肉'
            },
            {
                id: 8,
                title: '韩餐'
            },
            {
                id: 9,
                title: '小吃'
            },
            {
                id: 10,
                title: '甜品烘焙'
            },
            {
                id: 11,
                title: '西式快餐'
            },
            {
                id: 12,
                title: '甜品烘焙'
            },
            {
                id: 13,
                title: '韩餐'
            },
            {
                id: 14,
                title: '中式快餐'
            },
            {
                id: 15,
                title: '面条'
            },
            {
                id: 16,
                title: '中式快餐'
            },
            {
                id: 17,
                title: '甜品烘焙'
            }
        ]
    },
    mounted() {},
    methods: {
        changeTab(index, $event) {
            this.tabidex = index;
            var position = $event.path[1].offsetLeft;
            var liW = $('#scrolX li').eq(index).outerWidth();
            var ulL = $('#scrolX').scrollLeft();
            var ulW = $('#scrolX').width();
            if (!$($event.path[1]).is('li')) {
                return
            }
            $('#scrolX').animate({
                scrollLeft: position - ((ulW / 2) - (liW / 2))
            }, 300)
        }
    }
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

导航条点击居中



代码描述：因为网上找了好多插件，发现并不是自己想要的。所以自己写了一个，希望能帮到需要的朋友。

demo内有引入外部js（vue.js、jquery），vue只起到了数据遍历的功能，核心js代码可以在任何html使用的

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Jia

相关代码

PC中预览请把浏览器宽度调小点，看效果

导航条点击居中

最新