62,074
社区成员
发帖
与我相关
我的任务
分享jquery请教！谢谢！
页面代码：
<ul class="box">
<li>aaaa</li>
<li style="display: none">bbbb</li>
<li style="display: none">cccc</li>
<li style="display: none">dddd</li>
</ul>
<ul class="pagenum">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
点击1,显示相应的aaaa,将bbbb,cccc，dddd隐藏掉，
同理：
点击2,显示相应的bbbb,将aaaa,cccc，dddd隐藏掉，以此类推！
我写的以下，请高手完成，十分感谢！！
<ul class="box">
<li>aaaa</li>
<li style="display: none">bbbb</li>
<li style="display: none">cccc</li>
<li style="display: none">dddd</li>
</ul>
<ul class="pagenum">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
点击1,显示相应的aaaa,将bbbb,cccc，dddd隐藏掉，
同理：
点击2,显示相应的bbbb,将aaaa,cccc，dddd隐藏掉，以此类推！
我写的以下，请高手完成，十分感谢！！
$(document).ready(function() {
$(".pagenum li").click(function() {
$(".box li").eq($(this).text() - 1).show(); //显示点击所对应的内容
//请写一下将其它非点击的隐藏掉！！谢谢！！
});
});
...全文
请发表友善的回复…
发表回复
IE11下面经常卡到爆 2011-07-30
- 打赏
- 举报
boxes.not(":eq(" + i + ")").hide();
这一句就是隐藏其他的li
在前面定义一个boxes，可以避免每次点的时候都去DOM里找ul.box 下面的li
这一句就是隐藏其他的li
在前面定义一个boxes，可以避免每次点的时候都去DOM里找ul.box 下面的li
lvyichang 2011-07-30
- 打赏
- 举报
十分感谢dongxinxi
IE11下面经常卡到爆 2011-07-30
- 打赏
- 举报
2#是根据下面li的索引顺序来显示上面ul中位于相同索引的li
如果你要根据li的文本来显示上面的li，改成
如果你要根据li的文本来显示上面的li，改成
$(document).ready(function(){
var boxes = $("ul.box > li");
$("ul.pagenum > li").click(function(){
var i = parseInt($(this).text()) - 1;
boxes.not(":eq(" + i + ")").hide();
boxes.eq(i).show();
});
});
lvyichang 2011-07-30
- 打赏
- 举报
[Quote=引用 3 楼 dongxinxi 的回复:]
对了，上面是依照li的索引，不是依赖里面的文本，如果是那样改成
$(this).click(function(){
var i = parseInt($(this).text) - 1;
[/Quote]
十分谢谢！
jquery刚接触！能否写完整??谢谢！
对了，上面是依照li的索引，不是依赖里面的文本，如果是那样改成
$(this).click(function(){
var i = parseInt($(this).text) - 1;
[/Quote]
十分谢谢！
jquery刚接触！能否写完整??谢谢！
子夜__ 2011-07-30
- 打赏
- 举报
[Quote=引用 3 楼 dongxinxi 的回复:]
对了，上面是依照li的索引，不是依赖里面的文本，如果是那样改成
$(this).click(function(){
var i = parseInt($(this).text) - 1;
[/Quote]
差不多就是这样啊
对了，上面是依照li的索引，不是依赖里面的文本，如果是那样改成
$(this).click(function(){
var i = parseInt($(this).text) - 1;
[/Quote]
差不多就是这样啊
IE11下面经常卡到爆 2011-07-30
- 打赏
- 举报
对了，上面是依照li的索引，不是依赖里面的文本，如果是那样改成
$(this).click(function(){
var i = parseInt($(this).text) - 1;
$(this).click(function(){
var i = parseInt($(this).text) - 1;
IE11下面经常卡到爆 2011-07-30
- 打赏
- 举报
$(document).ready(function(){
var boxes = $("ul.box > li");
$("ul.pagenum > li").each(function(i){
$(this).click(function(){
boxes.not(":eq(" + i + ")").hide();
boxes.eq(i).show();
});
});
});
心灵彩虹 2011-07-30
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
width: 250px;
height: 290px;
font-size: 16px;
font-family: "Blackadder ITC";
color: #22dddd;
background-color: #123456;
}
.highlight {
color: red;
}
#btn {
width: 60px;
height: 20px;
font-size: 13px;
text-align: center;
position: absolute;
margin: 0 0 0 30px;
}
</style>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$all=$("#all li:gt(5)");
$("#btn").click(function(){
if($all.is(":hidden")){
$all.hide().show("fast");
$("#btn").val("big");
$("#all li").filter(":contains('canno'),:contains('microsoft')").addClass("highlight");
}else{
$all.show().hide("fast");
$("#btn").val("small");
$("#all li").filter(":contains('canno'),:contains('microsoft')").removeClass("highlight");
}
});
}) ;
</script>
</head>
<body>
<ul id="all">
<li>
lenovo
</li>
<li>
dell
</li>
<li>
hp
</li>
<li>
microsoft
</li>
<li>
sun
</li>
<li style="display:none;">
cisco
</li>
<li style="display:none;">
intel
</li>
<li style="display:none;">
amd
</li>
<li style="display:none;">
canno
</li>
<li style="display:none;">
apple
</li>
<li style="display:none;">
ibm
</li>
<li style="display:none;">
acer
</li>
<li style="display:none;">
sony
</li>
<li style="display:none;">
toshiba
</li>
<li style="display:none;">
sumsung
</li>
</ul>
<input type="button" id="btn" value="small"/>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
width: 250px;
height: 290px;
font-size: 16px;
font-family: "Blackadder ITC";
color: #22dddd;
background-color: #123456;
}
.highlight {
color: red;
}
#btn {
width: 60px;
height: 20px;
font-size: 13px;
text-align: center;
position: absolute;
margin: 0 0 0 30px;
}
</style>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$all = $("#all li:gt(5)");
$("#btn").toggle(function(){
$all.hide().show("fast");
$("#btn").val("big");
$("#all li").filter(":contains('canno'),:contains('microsoft')").addClass("highlight");
}, function(){
$all.show().hide("fast");
$("#btn").val("small");
$("#all li").filter(":contains('canno'),:contains('microsoft')").removeClass("highlight");
});
});
</script>
</head>
<body>
<ul id="all">
<li>
lenovo
</li>
<li>
dell
</li>
<li>
hp
</li>
<li>
microsoft
</li>
<li>
sun
</li>
<li style="display:none;">
cisco
</li>
<li style="display:none;">
intel
</li>
<li style="display:none;">
amd
</li>
<li style="display:none;">
canno
</li>
<li style="display:none;">
apple
</li>
<li style="display:none;">
ibm
</li>
<li style="display:none;">
acer
</li>
<li style="display:none;">
sony
</li>
<li style="display:none;">
toshiba
</li>
<li style="display:none;">
sumsung
</li>
</ul>
<input type="button" id="btn" value="small"/>
</body>
</html>
toggle()方法的效果就是切换元素的可见状态；即如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
下面说一下toggle(fn,fn)方法的使用，效果是：每次点击后依次调用函数；如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。注意这里本身已经有点击触发调用函数的功能，不需要另外.click(fn)了
