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

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

1.$(this).text() 查找当前的文本内容，用东西存起来

2.右边的scrollTop() 里面填写根据左边text值在右边查找到对应的dom元素然后再读取顶部的距离

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

<!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;width: 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;width: 200px;height: 320px;box-sizing: border-box}

.contentnext{

overflow: scroll;

}

.contentnext li,.contentnext p{

width: 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></div>

<li>2a</li>

<div><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></div>

<li>4a</li>

<div><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></div>

<li>6a</li>

<div><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></div>

<li>8a</li>

<div><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{width: 600px;height: 400px;border: 1px solid red;margin:100px auto;overflow: }

.content{ float: left;box-sizing: border-box;

width: 150px;height: 30px;background: #ACA9A9;border:1px solid #449556;text-align: center;line-height: 30px;

}

.con{

display: none;

}

.on{

display: block;

}

.flex{

width: 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）总结各种小应用相关推荐

前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序）
前端知识总结汇总!(HTML.CSS.JS.jQuery.vue.微信小程序) 前端理论考核题 1 / HTML 1.DOCTYPE 的作用是什么?标准模式与兼容模式各有什么区别? !DOCTYPE是 ...
JQuery的几个简单小案例（基础）
JQuery的几个简单小案例实现表格的的隔行换色实现复选框的全选与全不选 QQ表情的选择多选下拉列表的左右移动实现表格的的隔行换色需求:事先制作一个如图所示的table表格,将数据行的奇数行 ...
jquery/css需要记录的小知识（持续补充）
一.前言 2020年的第一篇了,奥利给! 这部分主要是汇总一些平时遇到的jquery和css小知识,作为笔记使用. 二.正文 1.jquery模拟select下拉框的选择事件,并传参数: self.s ...
jQuery和AngularJS的区别小分析
最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同,如果不能认识到这点而对于之前做jQuery开发的程序员,去直接学习angularjs ...
html使用element ui_Kendo UI for jQuery使用教程：自定义小部件（二）
Kendo UI目前最新提供KendoUI for jQuery.KendoUI for Angular.KendoUI Support for React和KendoUI Support for V ...
jQuery插件实现图片墙小案例
你想写出绚丽多彩的图片墙吗?想的话就来一起看一下接下来的内容吧接下来就让我们使用两个简单的插件来实现图片墙小案例吧.编写之前需要提前下载lazyload懒加载插件和masonry瀑布流式布局插件.( ...
用JQuery写出农场的小游戏
农场小游戏效果通过css来布局页面内的位置 <style type="text/css"> div{font-size:12px;border:#999 1px s ...
css3+jquery+js做的翻翻乐小游戏
主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: 1 <div class="containe ...
java jquery 框架_[Java教程]小谈Jquery框架
[Java教程]小谈Jquery框架 0 2013-12-23 18:01:16 现在Jquery框架对于开发人员基本上是无人不知,无人不晓了,用起来十分的方便,特别是选择器十分强大,提高了我们的开发 ...
运用JQuery代码写的计算器小案例
JQuery核心函数: (1). jQuery([selector,[context]]) 用法:这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器查找所有匹配的元素). 这个函数接收 ...

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

JQuery 总结（5）总结各种小应用相关推荐

最新文章

热门文章

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

JQuery 总结（5） 总结各种小应用相关推荐

最新文章

热门文章

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

JQuery 总结（5）总结各种小应用相关推荐