重置效果问题 因为这是做一个层弹出 不能用页面刷新吧建议你把这些样式写在一个cs文件里面,然后不要用cs选择器,直接用jQuery对他们的样式进行添加代码像你这样写也可以,但保证你的逻辑是清晰的!我也是菜鸟,感觉一步一步来好些!$(this).find('a').find('i').addClass('m_i').parent().parent().siblings().find('a').find('i').removeClass('m_i');这么长的赋值确实看的蛮蛋疼的。。 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 把最外层<div>最开始的html存在js里,temp=$(".div").eq(0).html()点下重置,再填回去就行了$(".div").eq(0).html(temp) 因为这是做一个层弹出 不能用页面刷新吧你这些样式的添加和去除 是在一个弹出的层里面的哈?恩 是的最外层的div 就一个弹出层 其他的效果都是在这个弹出层里实现的 我试过这种方法 可是 填回去的内容的 其他的效果都不能实现了想重置成什么样的,就在什么时候保存html 我试过这种方法 可是 填回去的内容的 其他的效果都不能实现了想重置成什么样的,就在什么时候保存html我就是保存最开始的html 填回去的内容 其他的效果都不能实现了 你试试就知道了 神奇on居然不能动态绑定。。按理说on也是委托给了document来绑定的,不会出现这种情况,是否是由于你用.div_head li的选择写法导致的。你把li设一个class,绑定class试试。我为了兼容各版本库,一直没用过on,都是用$(document).bind()的坐等解释 最开始的效果,就是第一个变蓝色的块?('div.div_head ul:eq(0) li:eq(0)').trigger("click"); 试用了下.bind() 填回去的内容 其他的效果还是不能实现了 看了下jquery的on API,果然跟我想的一样,on和bind一样,也必须绑定在不会被改变的父节点上。下面的写法就可以了记得要这样绑: $(document.body).on('click','.div_head li',function(){<html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Document</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <style> *{ margin: 0; padding: 0; } li{ list-style: none; } .div{ width: 300px; margin:0 auto; border:1px solid #066; } .div_head{ width:300px; height:35px; border-bottom:1px solid #066; } .div_head li{ width: 95px; height: 35px; display:inline-block; border-right:1px solid #066; line-height: 35px; text-align: center; } .div_head li.active{ background:#00BCF3; color:#FFF; } .div_head li:last-child{ border-right:0; } .div_menu{ width:300px; border-top:0; } .div_xia{ width:300px; border-top:1px solid #066; text-align:center; padding:10px 0; } .div_xia a{ width:100px; height:30px; display:block; text-align:center; line-height:30px; background:#3CC; color:#FFF; cursor:pointer; } .div_menu .div_menu_item{ width:300px; height:100px; text-align:center; display:none; } .div_menu_item li{ width:300px; height:30px; line-height:30px; display:inline-block; position:relative; border:1px solid #999; } .div_menu_item li.on{ background:#9C6; } .div_menu_item .m_i{ width:10px; height:10px; position:absolute; right:10px; top:10px; background:#00BCF3; } </style> <script> $(function(){ var _html=$(".div").html() $(document.body).on('click','.div_head li',function(){ $(this).addClass('active').siblings().removeClass('active'); var index=$('.div_head li').index(this); $('.div_menu > div').eq(index).show().siblings().hide(); }); $(document.body).on('click','.div_menu_item li',function(){ $(this).addClass('on').siblings().removeClass('on'); $(this).find('a').find('i').addClass('m_i').parent().parent().siblings().find('a').find('i').removeClass('m_i'); }); $(document.body).on("click",'.div_xia a',function(){ $(".div").html(_html) }) }) </script></head><body><div class="div"> <div class="div_head"> <ul> <li class="active">点击1</li> <li>点击2</li> <li>点击3</li> </ul> </div> <div class="div_menu"> <div class="div_menu_item" style="display:block;"> <ul> <li class="on"> <a>111111111<i class="m_i"></i> </a> </li> <li> <a>222222222<i></i> </a> </li> </ul> </div> <div class="div_menu_item"> <ul> <li class="on"> <a>3333333333<i class="m_i"></i> </a> </li> <li> <a>4444444444<i></i> </a> </li> </ul> </div> <div class="div_menu_item"> <ul> <li class="on"> <a>555555555555<i class="m_i"></i> </a> </li> <li> <a>66666666<i></i> </a> </li> </ul> </div> </div> <div class="div_xia"> <a href="javascript:;">重置效果</a> </div></div></body></html> $('#reset').click(function(){ $('.div_head li').eq(0).trigger('click');}); js 获取你要还原的对象 clone 一份还原的话 直接就删掉原来的 把 备份的 append进去 初学,ext tree没显示出来。 javascript 动态删除函数 哪位高手能告诉一下下来2个JS语句含义 求救js问题 jquery 简单问题 关于滚动条的问题, 怎么才可以做到一定时间内让 default 变为 hidden 怎样用javascript获取点击back按钮的消息? 在分窗体中,如何在A中点击一个按钮是B刷新啊? ●●●●●●●●●●●●关于层的隐藏!!!谢谢●●●●●●●●●●●● js clone(true)方法 复制之后时间控件不可用 大家有用过如图所示的移动设备web前端选择插件么
temp=$(".div").eq(0).html()
点下重置,再填回去就行了
$(".div").eq(0).html(temp)
因为这是做一个层弹出 不能用页面刷新吧你这些样式的添加和去除 是在一个弹出的层里面的哈?恩 是的最外层的div 就一个弹出层 其他的效果都是在这个弹出层里实现的
我试过这种方法 可是 填回去的内容的 其他的效果都不能实现了
想重置成什么样的,就在什么时候保存html
我试过这种方法 可是 填回去的内容的 其他的效果都不能实现了
想重置成什么样的,就在什么时候保存html我就是保存最开始的html 填回去的内容 其他的效果都不能实现了 你试试就知道了
我为了兼容各版本库,一直没用过on,都是用$(document).bind()的
坐等解释
('div.div_head ul:eq(0) li:eq(0)').trigger("click");
试用了下.bind() 填回去的内容 其他的效果还是不能实现了
记得要这样绑: $(document.body).on('click','.div_head li',function(){<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.div{
width: 300px;
margin:0 auto;
border:1px solid #066;
}
.div_head{
width:300px;
height:35px;
border-bottom:1px solid #066;
}
.div_head li{
width: 95px;
height: 35px;
display:inline-block;
border-right:1px solid #066;
line-height: 35px;
text-align: center;
}
.div_head li.active{
background:#00BCF3;
color:#FFF;
}
.div_head li:last-child{
border-right:0;
}
.div_menu{
width:300px;
border-top:0;
}
.div_xia{
width:300px;
border-top:1px solid #066;
text-align:center;
padding:10px 0;
}
.div_xia a{
width:100px;
height:30px;
display:block;
text-align:center;
line-height:30px;
background:#3CC;
color:#FFF;
cursor:pointer;
}
.div_menu .div_menu_item{
width:300px;
height:100px;
text-align:center;
display:none;
}
.div_menu_item li{
width:300px;
height:30px;
line-height:30px;
display:inline-block;
position:relative;
border:1px solid #999;
}
.div_menu_item li.on{
background:#9C6;
}
.div_menu_item .m_i{
width:10px;
height:10px;
position:absolute;
right:10px;
top:10px;
background:#00BCF3;
}
</style>
<script>
$(function(){
var _html=$(".div").html() $(document.body).on('click','.div_head li',function(){
$(this).addClass('active').siblings().removeClass('active'); var index=$('.div_head li').index(this);
$('.div_menu > div').eq(index).show().siblings().hide();
});
$(document.body).on('click','.div_menu_item li',function(){
$(this).addClass('on').siblings().removeClass('on');
$(this).find('a').find('i').addClass('m_i').parent().parent().siblings().find('a').find('i').removeClass('m_i');
});
$(document.body).on("click",'.div_xia a',function(){
$(".div").html(_html)
})
})
</script>
</head>
<body>
<div class="div">
<div class="div_head">
<ul>
<li class="active">点击1</li>
<li>点击2</li>
<li>点击3</li>
</ul>
</div>
<div class="div_menu">
<div class="div_menu_item" style="display:block;">
<ul>
<li class="on">
<a>111111111<i class="m_i"></i>
</a>
</li>
<li>
<a>222222222<i></i>
</a>
</li>
</ul>
</div>
<div class="div_menu_item">
<ul>
<li class="on">
<a>3333333333<i class="m_i"></i>
</a>
</li>
<li>
<a>4444444444<i></i>
</a>
</li>
</ul>
</div>
<div class="div_menu_item">
<ul>
<li class="on">
<a>555555555555<i class="m_i"></i>
</a>
</li>
<li>
<a>66666666<i></i>
</a>
</li>
</ul>
</div>
</div>
<div class="div_xia">
<a href="javascript:;">重置效果</a>
</div>
</div>
</body></html>
$('#reset').click(function(){
$('.div_head li').eq(0).trigger('click');
});
还原的话 直接就删掉原来的 把 备份的 append进去