jquery学习一

Jquery学习之选项卡：

实现效果：当鼠标触碰到不同的选项卡的时候。展示不同的图片

基本页面书写：

<body>

<div >

<ul >

<li>three</li>

扫描二维码关注公众号，回复： 5905967 查看本文章

</ul>

</div>

</body>

效果：可以看到非常丑

2添加样式：

2.1给最外面的div添加一个边框消除ul li的初始样式小点

效果：可以看到标签前的小点没了

2.2让div在浏览器的显示中间并且让标签水平排列

给div添加一个样式class=”box”

<style>

padding:0px;

margin:0px;

}

.box{

width:440px;

height:298px;

border:1px solid #000;

margin:150px auto;

}

</style>

给ul添加样式class=”nav”

.nav>li{

list-style:none;

width:109px;

height:50px;

float:left;

border-left:1px solid #ccc;

background:#CF3;

text-align:center;

line-height:50px;

}

这两部下来的效果：

2.3给li添加鼠标悬停时的颜色效果

给li添加样式class=”current”:

.nav>.current{

background:#666;

}

效果：

2.4添加下面显示的图片

<ul >

</ul>

效果：

2.5现在的效果明显不符合效果，所以要给他们在写点样式

隐藏这些图片

给第二个ul添加样式class=”content”

.content>li{

list-style:none;

display:none;

}

效果：图片都看不到了

默认先显示一张

给li添加样式class=”show”

.content > .show{

display:block;

}

效果：

2.6现在可以看到基本效果出来了

3添加jquery动态响应

3.1先引入jquery的架包我用的是在线版，你也可以下载下来

3.2用mouseenter 和 mouseleave可以实现监听鼠标事件

mouseenter是鼠标进入的时候 mouseleave是鼠标移除的时候

先写入这两个方法

$(function(){

$(".nav>li").mouseenter(function(){

console.log("鼠标移入了");

});

$(".nav>li").mouseleave(function(){

console.log("鼠标移出了");

});

效果：鼠标移到上面的时候：

鼠标移走的时候：

3.3改变导航栏的效果，当鼠标移到上面的时候颜色改变，当移走的时候颜色变回去

$(".nav>li").mouseenter(function(){

$(this).addClass("current");

});

$(".nav>li").mouseleave(function(){

$(this).removeClass("current");

});

这里用到了addClass 和 removeClass来实现对节点的添加样式和删除样式

3.4添加响应不同标签的效果显示

这里用到$(this).index()来获取在同级的时候，你选的标签所在这些同级里的位置

$(".nav>li").mouseenter(function(){

//获取当前选项卡所排列的位置

console.log($(this).index());

});

既然能回的位置信息，则可以修改了

$(function(){

$(".nav>li").mouseenter(function(){

$(this).addClass("current");

//获取当前选项卡所排列的位置

console.log($(this).index());

var index=$(this).index();

//根据所应找图片

var $li=$(".content>li").eq(index);

//显示图片

$li.addClass("show");

$(".content>li")

});

$(".nav>li").mouseleave(function(){

$(this).removeClass("current");

var index=$(this).index();

//根据所应找图片

var $li=$(".content>li").eq(index);

$li.removeClass("show");

});

Finished

猜你喜欢