您的位置：首页 > Web前端 > JQuery

jQuery列表的收缩效果，变色，添加好友的智能效果

2014-08-14 09:14 393 查看

效果如图：

添加一个<span>隐藏域用于显示结果！

源代码：

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
$(document).ready(function(){
$(".group").click(function(){
$(".panel1").slideToggle("slow");

});
});
$(document).ready(function(){
$(".addFriend").click(function(){
$(".add").slideToggle("slow");

});
});
$(document).ready(function(){
$('li').click(function() {
var url ="http://www.baidu.com";

window.location.href = url;

});
});
function search()
{

var newFriend=document.getElementById("newFriend").value;
if(newFriend=='kobe')
{

document.getElementById("addRes").style.display="block";
document.getElementById("addbtn").style.display="block";
document.getElementById("addbtn").style.display="inline";
document.getElementById("searchRes").innerHTML='kobe';

}else{
document.getElementById("addRes").style.display="block";
document.getElementById("addbtn").style.display="none";
document.getElementById("searchRes").innerHTML= '没有此人';
}
}
</script>

<style type="text/css">

li:hover   {color:red; display:block;}
li:active  {color:yellow;}

p.flip,p.group,p.addFriend,div.add
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
cursor:pointer;
}
div.panel,div.panel1
{
margin:0px;
padding:5px;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel,div.panel1
{

display:block;

}
li {
cursor:pointer;

}

#addRes{
display:none;

}

</style>

</head>

<body>
<p class="addFriend" >添加好友(点击添加)</p>
<div class="add">
<input type="text" id="newFriend"/>
<input type="button" value="查找" onclick="search()">
<div id="addRes">
<span id="searchRes"></span>
<input type="button" value="添加" id="addbtn">
</div>
</div>
<p class="flip"><span>好友列表(点击查看)</span></p>
<div class="panel" >
<ul>
<li>KOBE</li>
<li>ALLEN</li>
<li>MCGRADY</li>
<li>JORDAN</li>
<li>JAME</li>
<li>WADE</li>

</div>
<p class="group" >群聊(点击查看)</p>
<div class="panel1">
<ul>
<li><span>三人组</span></li>
<li>四人帮</li>
<li>INVENTEC</li>
<li>老板来碗骚泡</li>
<li>610窝</li>
<li>小眼睛联盟</li>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航