JQ选项卡效果丨网站常用效果之选项卡效果

按照以前的惯例上预览 和代码 在说思路

Html




<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>选项卡效果 www.big-culture.com</title>
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<ul class="nav">
<li class="ys">星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
</ul>
<div class="nav-box" style="display: block;">
今天星期一

</div>
<div class="nav-box">
今天星期二

</div>
<div class="nav-box">
今天星期三

</div>
<div class="nav-box">
今天星期四

</div>
<div class="nav-box">
今天星期五

</div>

</body>
</html>

 

Css




ul {
list-style: none;
overflow: hidden;
margin: 0;
padding: 0;
}

li {
float: left;
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: aliceblue;

}

.ys {
background-color: #000;
color: #fff;
}

.nav-box {
width: 400px;
height: 300px;
background-color: #000;
color: #fff;
line-height: 300px;
text-align: center;
display: none;
}

 

Js




$(function() {

var nav = $(".nav>li");
var navb = $(".nav-box");

// console.dir(nav);
// console.dir(navb);
nav.click(function() {

var index = $(this).index(); // 获取点击后的下标
// console.log(index);
$(this).siblings(".nav>li").removeClass("ys").end().addClass("ys"); //大致的意思是说 自己的其他 li 移除 class 属性,自己加上 class属性
navb.eq(index).siblings(".nav-box").hide().end().show(); //这句话的意思和上面一样

})

})

 

先说一下html的结构,写了 五个 li 为菜单,在为它对应的写了5 div装内容,默认的第一个div设置为display:block;其余的都是display:none;

我们要做的效果是当我们鼠标点击每一个li的时候对应的div会display:block,

观察代码我们会发现有五个li也有五个div,如果我们要让鼠标点击li的时候对应的div显示的话最好的方法使用数组的下标,

如何获取下标呢?我用了 index()的方法去获取,

我们给li绑定一个事件,在事件中写到 $(this).index()     // 意思就是自己的下标;

当我们已经获取到下标后就可以很随意的去控制div

navb.eq(index).siblings(“.nav-box”).hide().end().show();  //div[index]其他的div隐藏自己显示;

写了这句话后其实选显卡已经做好了一半,但是我们会发现虽然div有了效果可是li菜单本身却没有发生变化,li没有一个选中的状态一直是一个默认的状态,

观察html css发现我给了选中状态下一个class,

所以我们可以这样写,点击自己的后加上 选中状态的这个class,给其他没有点击的li去掉class,

$(this).siblings(“.nav>li”).removeClass(“ys”).end().addClass(“ys”);

 

 

 

 

 

 

未经允许不得转载:绿岛小站 » JQ选项卡效果丨网站常用效果之选项卡效果

赞 (0)

评论 2

评论前必须登录!

登陆 注册
  1. dywjc为什么充值了,支付宝付了钱,不给绿币
    • Haor0507您好 网站出现BUG 充值系统出现问题 已经联系您的邮箱