1、show()、hide()方法会显示、隐藏元素。用toggle()方法在显示、隐藏之间切换:
$(":button[value=show]").click(function() { $("div").show(); });
$(":button[value=hide]").click(function() { $("div").hide(); });
<div>哈哈哈哈哈哈哈哈哈哈哈<br />哈哈哈哈哈哈哈哈哈哈哈<br />哈哈哈哈哈哈哈哈哈哈哈<br /></div>
<input type="button" value="show" />
<input type="button" value="hide" />
<script type="text/javascript">
$(":button[value=show]").click(function() { $("div").show("slow"); });
$(":button[value=hide]").click(function() { $("div").hide("slow"); });
</script>
如果show、hide方法不带参数则是立即显示、立即隐藏,如果指定速度参数则会用指定时间进行动态显示、隐藏,单位为毫秒。也可以使用三个内置的速度:fast(200毫秒)、normal(400毫秒)、slow(600毫秒),jQuery动画函数中需要速度的地方一般也可以使用这个三个值。toggle、slideDown、slideUp。
2、案例:QQTab效果。常见错误:animate参数是词典类型。隐藏和显示的级别不一样。mouseover(进入图片的时候触发一次)和mousemove(鼠标在元素上移动就会一直不断的触发)的区别。mousemove中放大造成的“没效果”的迷局。“没效果”不等于“没执行”。如何证明“这段代码运行了吗”alert。样式优先级。
案例:QQTab效果:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#qq li:odd").addClass("body");
$("#qq li:even").addClass("header").click(function() {
$(this).next("li.body").show("fast").siblings("li.body").hide("fast");
});
$("#qq li:first").click();//模拟点击第一个元素
});
</script>
<style type="text/css">
ul{list-style-type:none;}
.header{background-color:Red;cursor:pointer;}
.body{border-color:Blue;border-style:solid;border-width:1px;}
</style>
</head>
<body>
<ul id="qq">
<li>我的好友</li>
<li>张三<br />李四<br /></li>
<li>我的同学</li>
<li>拉登<br />小泉<br /></li>
<li>陌生人</li>
<li>张宇<br />苏打绿<br /></li>
</ul>
</body>
</html>
3、课下练习:tabControl、焦点图。
TabContro效果:
<style type="text/css">
#tabCtrl ul
{
list-style-type: none;
}
#tabCtrl ul li
{
float: left;
margin: 0 10px;
cursor: pointer;
}
.activeTab
{
background-color: Red;
}
</style>
<div id="tabCtrl">
<ul>
<li class="activeTab">常规</li>
<li>高级</li>
<li>设置</li>
</ul>
<br />
<div id="tabPage">
<div>
这里是常规设置</div>
<div style="display: none">
这里是高级设置</div>
<div style="display: none">
这里是设置设置</div>
</div>
</div>
<script type="text/javascript">
$("#tabCtrl li").click(function() {
$(this).addClass("activeTab");
$(this).siblings().removeClass("activeTab");
var index = $("#tabCtrl li").index($(this));
var div = $("#tabPage div").eq(index);
div.show();
div.siblings().hide();
});
</script>
tabControl目标:
<div>
<div>
<span>常规</span>
<div>
<input type="check" />adsfasfdasdfasfdsaf
</div>
</div>
<div>
<span>高级</span>
<div>
<input type="text" />adsfasfdasdfasfdsaf
</div>
</div>
</div>