2018-11-06选项卡/手风琴/置顶菜单
选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery做选项卡</title>
<style type="text/css">
.btns{
width: 500px;
height: 50px;
}
/选项卡的样式/
.btns input{
width: 100px;
height: 50px;
background-color: #ddd;/默认灰色/
color: #666;
border: 0px;
}
/被选中的选项卡的样式/
.btns input.cur{
background-color: gold;
}
/内容区的样式/
.contents div{
width: 500px;
height: 300px;
background-color: gold;
display: none;/默认隐藏/
line-height: 300px;
text-align: center;
}
/被选中的内容区的样式/
.contents div.active{
display: block;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
('#box1 #btns input').click(function() {
//失去焦点，避免出现默认的蓝框
$(this).blur();
//this是原生的对象
// alert(this);//弹出[object HTMLInputElement]，说明this就是当前点击的input元素
//jQuery的this对象使用时要用$()包起来，这样就可以调用jQuery的方法了
//给当前元素添加选中样式，为兄弟元素移除选中样式
$(this).addClass('cur').siblings().removeClass('cur');
//$(this).index()获取当前按钮所在层级范围的索引值
//显示对应索引的内容区，隐藏其它兄弟内容区
$('#box1 #contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
$('#box2 #btns input').click(function() {
$(this).blur();
$(this).addClass('cur').siblings().removeClass('cur');
$('#box2 #contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
})
</script>
</head>
<body>
<div id="box1">
<div class="btns" id="btns">
<input type="button" value="tab01" class="cur">
<input type="button" value="tab02">
<input type="button" value="tab03">
</div>
</div>
<div id="box2">
<div class="contents" id="contents">
<div class="active">tab文字内容一</div>
<div>tab文字内容二</div>
<div>tab文字内容三</div>
</div>
</div>
</body>
</html>
手风琴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴</title>
<style>
{margin:0;padding:0;}
body{font-size:12px;}
#accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
#accordion ul{list-style:none;}
#accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;}
#accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
#accordion ul li img{display:block; float:right;}
.bar01{left:0px;}
.bar02{left:643px;}
.bar03{left:664px;}
.bar04{left:685px;}
.bar05{left:706px;}
.bar01 span{background:#09E0B5;}
.bar02 span{background:#3D7FBB;}
.bar03 span{background:#5CA716;}
.bar04 span{background:#F28B24;}
.bar05 span{background:#7C0070;}
</style>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
('#accordion li').click(function() {
(this).index()21}
);
/*
错误的索引用法
这里不能使用function(index)的索引，因为循环会先执行完，当点击事件执行时，会导致索引值不对，所以还应该使用已经保存在this当中的索引值
$(this).prevAll().each(function(index){
alert(index);
$(this).animate(
{left: index*21}
);
})
*/
/*要使用保存在$(this)里边的索引值*/
// 当前li之前的所有兄弟li都往左移
// 由于每个li移动的距离不同，使用each循环分别设置left值
$(this).prevAll().each(function(){
//要移动的每一个元素
$(this).animate(
{left: $(this).index()*21}
);
})
// 当前li之后的所有兄弟li都往右移
$(this).nextAll().each(function(){
//要移动的每一个元素
$(this).animate(
{left: 727-(5-$(this).index())*21}
);
})
});
})
</script>
</head>
<body>
<div id="accordion">
<ul>
<li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li>
<li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li>
<li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li>
<li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li>
<li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li>
</ul>
</div>
</body>
</html>
置顶菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>置顶菜单</title>
<style type="text/css">
body{margin:0px;}
.logo_bar{
width:960px;
height:200px;
background-color:#f0f0f0;
margin:0 auto;
}
.menu,.menu_pos{
width:960px;
height:50px;
margin:0 auto;
background-color:gold;
text-align:center;
line-height:50px;
}
.menu_pos{
display:none;
}
.down_con{
width:960px;
height:1800px;
margin:0 auto;
}
.down_con p{
margin-top:100px;
text-align:center;
}
.totop{
width:50px;
height:50px;
background:url(images/up.png) center center no-repeat #000;
border-radius:50%;
position:fixed;
right:50px;
bottom:50px;
display: none;
}
</style>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function() {
//获取页面滚动时，超出浏览器窗口上方的高度
var nowTop = $(document).scrollTop();
// console.log(nowTop);
if(nowTop > 200){
//将菜单置顶显示
$('.menu').css({
position: 'fixed',
left: '50%',
top:0,
marginLeft: '-480px'
});
//显示占位层，避免页面跳动
$('.menu_pos').show();
}else{
//取消置顶菜单，菜单归入文档流
$('.menu').css({
position: 'static',//取消定位
marginLeft: 'auto'
});
//隐藏点位层
$('.menu_pos').hide();
}
//滚动到顶部按钮的显示和隐藏
if(nowTop > 400){
$('.totop').fadeIn();
}else{
$('.totop').fadeOut();
}
});
//动画的方式滚动到页面顶部
$('.totop').click(function() {
$('html,body').animate({scrollTop: 0});
});
})
</script>
</head>
<body>
<div class="logo_bar">顶部logo</div>
<div class="menu">置顶菜单</div>
<div class="menu_pos"></div>
<div class="down_con">
<p style="color: red">网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
</div>
<a href="javascript:;" class="totop"></a>
</body>
</html>
