has just entered the industry, and now I am slowly learning that VUE now needs such a navigation function, but how to express it in the way of vue? Ask for a big god (and how to avoid being so blunt and smooth when you click to switch it)
< html >
< head >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
header {
width: 100%;
overflow: hidden;
white-space: nowrap;
overflow-x: scroll;
}
header::-webkit-scrollbar {
display: none;
}
.nav {
display: inline-block;
margin-left: 15px;
margin-right: 10px;
height: 50px;
line-height: 50px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> < / head >
< body >
< header >
<div class="nav">
1
</div>
<div class="nav">
2
</div>
<div class="nav">
3
</div>
<div class="nav">
4
</div>
<div class="nav">
5
</div>
<div class="nav">
6
</div>
<div class="nav">
7
</div>
<div class="nav">
8
</div>
<div class="nav">
9
</div>
<div class="nav">
10
</div> < / header >
< script type= "text/javascript" >
$(function(){
$(".nav").on("click",function(ev){
var moveX = $(this).position().left+$(this).parent().scrollLeft();
var pageX = document.documentElement.clientWidth;
var blockWidth = $(this).width();
var left = moveX-(pageX/2)+(blockWidth/2);
$(this).css("color","red").siblings().css("color","-sharp000000");
$("header").scrollLeft(left);
})
}); < / script >
< / body >
< / html >