一.点击 右边滚动条跳转，模仿汽车品牌查找滚动条
主要知识点：
1.$(this).text() 查找当前的文本内容，用东西存起来
2.右边的scrollTop() 里面填写 根据左边text值在右边查找到对应的dom元素 然后再读取顶部的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
*{padding: 0;margin:0;}
li{list-style: none;height: 40px; 180px;background-color: #76C825;border: 1px solid #5E606F;box-sizing: border-box;
text-align: center;line-height: 40px;
cursor: pointer}
ul{float: left;background-color: #B7ACAC; 200px;height: 320px;box-sizing: border-box}
.contentnext{
overflow: scroll;
}
.contentnext li,.contentnext p{
100px;
}
.on{
background: orange;
}
</style>
</head>
<body>
<ul class="contentprev">
<li>1a</li>
<li>2a</li>
<li>3a</li>
<li>4a</li>
<li>5a</li>
<li>6a</li>
<li>7a</li>
<li>8a</li>
</ul>
<ul class="contentnext">
<li>1a</li>
<div><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p>
<p>sss</p></div>
<li>2a</li>
<div><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p>
<p>sss</p></div>
<li>3a</li>
<div><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p>
<p>sss</p></div>
<li>4a</li>
<div><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p>
<p>sss</p></div>
<li>5a</li>
<div><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p>
<p>sss</p></div>
<li>6a</li>
<div><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p>
<p>sss</p></div>
<li>7a</li>
<div><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p>
<p>sss</p></div>
<li>8a</li>
<div><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p><p>sss</p>
<p>sss</p>
<p>sss</p></div>
</ul>
<script>
$(".contentprev li").click(function () {
var texta=$(this).text();
$(this).addClass("on").siblings().removeClass("on");
$(".contentnext").animate({
scrollTop:$(".contentnext").find("li:contains('"+texta+"')").prop("offsetTop")},100
)
console.log($(".contentnext").find("li:contains('"+texta+"')").offset().top)
console.log($(".contentnext").find("li:contains('"+texta+"')").prop("offsetTop"))
})
</script>
</body>
</html>
二 选项卡切换
1.$(this).index() 这个可以查询当前的索引 i
$(".next li").eq($(this).index()).addClass("on") 找到需要改变class的 li 通过索引改变其样式
2.碰到结构不一致的
在next li 里面 给每个li分别增加index属性，index=0 按照我们理想的顺序。
$(".next li").filter("[index='"+i+"']").addClass("on");
var i=$(this).index();
在素有的li里面 查找 拥有的属性 和 我们当前的属性一致的 给添加样式.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
*{margin:0;padding: 0;list-style: none;}
.wrap{ 600px;height: 400px;border: 1px solid red;margin:100px auto;overflow: }
.content{ float: left;box-sizing: border-box;
150px;height: 30px;background: #ACA9A9;border:1px solid #449556;text-align: center;line-height: 30px;
}
.con{
display: none;
}
.on{
display: block;
}
.flex{
400px;
height: 200px;
background-color: red;
display: flex;
align-items: justify;
}
</style>
</head>
<body>
<div class="flex">
<div>aaaa1</div>
<div>aaaa2</div>
<div>aaaa3</div>
</div>
<div class="wrap">
<ul class="contt">
<li class="content">内容提要01</li>
<li class="content">内容提要02</li>
<li class="content">内容提要03</li>
<li class="content">内容提要04</li>
</ul>
<ul class="next">
<li class=" con on" index="0" >内容提要01</li>
<li class="con" index="1">内容提要02</li>
<li class="con" index="2">内容提要03</li>
<li class="con" index="3">内容提要04</li>
</ul>
</div>
<script>
$(".contt li").mouseover(function () {
// console.log($(this).index())
// $(".next li").removeClass("on")
// $(".next li").eq($(this).index()).addClass("on")
var i=$(this).index();
$(".next li").removeClass("on")
$(".next li").filter("[index='"+i+"']").addClass("on")
})
</script>
</body>
</html>