JQuery 总结（5）总结各种小应用

一.点击右边滚动条跳转，模仿汽车品牌查找滚动条
主要知识点：

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>

JQuery 总结（5） 总结各种小应用

JQuery 总结（5）总结各种小应用