m.lom599.com_手机版乐白家网址_乐百家手机首页登录

ajax动态为a标签href赋值不执行跳转的原因分析及

作者: 手机版乐白家网址  发布:2019-08-15

 

由于一中考评系统要加入一个新的功能“调查问卷”,我想沿用别人做好的调查问卷,用别人的有一个好处就是:人家做的专业,界面美化等非常人性化,但是它需要你每次设置完调查问卷后发布一下网址,客户端访问的每次都是变动的地址。

jquery简单的大背景banner图片全屏切换,

 

详细内容请点击

 

这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟。个人网站上线不久,最近整理整理从前的一些小逼格的事

 

大背景全屏切换效果图:

 

图片 1 图片 2 图片 3

 

大背景全屏切换效果html内容:

 

<!--banner图片切换开始-->
<div class="banner">

<div class="block none"><img src="images/banner1.png"/></div>
<div class=" none"><img src="images/图片切换.png" /></div>
<div class=" none"><img src="images/banner3.png" /></div>
<div class=" none"><img src="images/banner4.png" /></div>
<div class=" none"><img src="images/banner2.png" /></div>

<div class="banner_1">
<ul class="banner_2">
<li>
<span class="banner_3"></span>
<img src="images/qiehuan_mall1.jpg" width="90%" class="img_1"/>
<p>丰富强大的功能</p>
</li>
<li>
<span class="banner_3"></span>
<img src="images/qiehuan_mall2.jpg" width="90%" />
<p>云端数据处理能力</p>
</li>
<li>
<span class="banner_3"></span>
<img src="images/qiehuan_mall3.jpg" width="90%" />
<p>云端超强制作引擎</p>
</li>
<li>
<span class="banner_3"></span>
<img src="images/qiehuan_mall4.jpg" width="90%" />
<p>高质量的用户体验</p>
</li>
<li>
<span class="banner_3"></span>
<img src="images/qiehuan_mall5.jpg" width="90%" />
<p>用户行为统计分析</p>
</li>
</ul>
</div>
</div>
<!--banner图片切换结束-->

 

大背景全屏切换效果css内容:

 

@charset "utf-8";*{margin:0;padding:0}
body,div,dt,p,dl,dd,ul,li,ol,a,input,figure,figcaption,img{list-style:none;margin:0 auto;padding:0;text-decoration:none}
.banner{width:100%;height:450px;position:relative;background:url("../images/banner_beijing1.jpg") no-repeat;background-size:100% 100%}
.banner_1{width:100%;height:125px;position:absolute;bottom:0;left:0;border-top:1px solid #fff}
.banner_2{width:1000px;height:125px}
.banner_2 .img_1{width:80%;border:4px #f7941d solid}
.banner_2 li{width:150px;height:125px;float:left;padding:15px 25px 15px 25px;color:#fff;position:relative}
.banner_2 li .banner_3{width:29px;height:18px;position:absolute;top:0;left:85px}
.sanjiao{background:url("../images/index_sj.png") no-repeat}
.banner_2 li p{margin-top:10px}
.banner .none{display:none;text-align:center}
.banner .block{display:block;text-align:center}

 

大背景全屏切换效果js内容:

 

var color;
$(document).ready(function() {
$(".banner_2 li").bind("mousemove", changebg);
test(0);
});
function changebg() {
var index = $(".banner_2 li").index($(this));
test(index);
};
function test(index) {
var li_length = $(".banner_2 li").length;
if (index > li_length) {
index = 0;
}
$(".banner_2 li").eq(index).css("color", "#f7941d").siblings().css("color", "#ffffff");
$(".none").eq(index).show().siblings(".none").hide();
$(".banner_3").eq(index).addClass("sanjiao").parents().siblings().children("span").removeClass("sanjiao");
$(".banner_2 img").eq(index).addClass("img_1").parents().siblings().children("img").removeClass("img_1");
clearTimeout(color);//清除定时器
color = setTimeout("test(" (index 1) ")", 3000);//添加定时器
}

学习来源:

 

更多jquery内容请点击

 

详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换...

HTML5是目前最新的HTML规范,每一个web开发人员将会发现自己需要使用这项新的标准工作。而且,其中很多人会发现,由于HTML4与HTML5之间的区别,新建一个HTML5的网站远比从HTML4往HTML5上迁移来的容易。

客户端每次点击“调查问卷”,就会跳转到相应页面:
图片 4 
点击“调查问卷”即进入调查问卷页面:
图片 5 
我使用a 标签,每次访问管理员提交的“调查问卷”

 

复制代码 代码如下:

事实上,HTML5并没有对HTML4做非常重大的调整,而且两者之间有很多相似的地方。

<li><a href="" onclick="meizz(this)">调查问卷</a></li>

 

点击“调查问卷”,调用meizz函数,该函数通过ajax调用返回要访问的“调查问卷”网址:

虽然如此,两者之间的主要区别仍然需要注意。下面是HTML4与HTML5之间的主要区别(并不是全部,全部列出来是不可能的):

复制代码 代码如下:

 

<script type="text/javascript" language="javascript">
function meizz(e) {
$.ajax({
//async:false, //设置ajax的同步
type: "get", //get方式
url: "../handler/QueryQuestionnaire.ashx",
//返回数据成功,将返回的json数据解析,显示在课程信息列表中
success: function (strJson) {
//检查后台返回的数据
var dataArray = eval(strJson);
e.href = dataArray[0].Questionnaire;//要访问的网址
},
//返回数据失败,弹出错误显示
error: function (XmlHttpRequest, textStatus, errorThrown) {
alert(XmlHttpRequest.responseText);
}
});
}
</script>

1、HTML5仍然是一个制定中的标准

现象是 e.href如果放在函数的$.ajax之上可以运行,但是放到ajax里面绑定动态返回的地址,就不能运行了。经过了郁闷,最终找到了答案:因为ajax默认调用是异步的,所以不等ajax调用处理回调函数为href赋值,就直接发起了href,在这里这时候href是空值。

 

解决方法:将ajax调用方法改为同步,声明ajax调用方式为同步:

这第一个区别显而易见,但是也是非常重要的一个,我们从它开始。你也许已经看到了到处都有很多关于HTML5很酷的言论,但是这些都无法改变HTML5依然是一个制定中的标准的事实。HTML4也许已经超过10岁了,但是,它作为正式标准的事实一直没变。

复制代码 代码如下:

 

$.ajax({
async:false, //设置ajax的同步
}

另一方面,HTML5仍然处在初级阶段,预期会发生很多变化。你必须把这些因素考虑进来,因为你在网站上使用的这些新增加或修改的网页元素会每年都会发生多次变化,你需要不停的更新升级你的网站,这可不是你希望的。这就是为什么到目前为止,最好在产品里使用HTML4,只在实验里使用HTML5的原因。

这样href的执行就必须等待function中ajax调用完成后才会触发,就得到了想要的结果。

 

...

2、简化的语法

 

更简单的doctype声明是HTML5里众多新特征之一。现在,只需要写<!doctype html>就好了。HTML5的语法兼容HTML4和XHTML1,但不兼容SGML。

 

3、新的<canvas>标记代替flash

 

对于Web用户来说,Flash既是惊喜也是一种痛苦。所以,一些开发人员对HTML5威胁Flash的做法不满,但对于那些忍受着要花好久才能加载和运行的臃肿的Flash视频的人来说,用新的<canvas> 标记渲染图像的技术已经梦想成真。

 

目前,<canvas> 标记并不能提供所有的Flash具有的功能,但假以时日,其必将Flash从web上淘汰!我们拭目以待,因为很多人对此表示怀疑。

 

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:ajax动态为a标签href赋值不执行跳转的原因分析及

关键词: m.lom599.com