首页 > Web开发 > 详细

html模板,根据链接调用页面展示

时间:2015-01-30 16:07:06      阅读:325      评论:0      收藏:0      [点我收藏+]

做网站页面,查找各种框架,但都不理想,frameset不好控制,iframe对于网站SEO优化不怎么好,一直很头疼。

后来得知可以使用js直接调用,本使用的是页面加载js调用,如下:

$("#head").load("head.html");
				$("#foot").load("foot.html");

但又有问题了,不同页面调用,则图片的地址如何书写呢?当然这是有解决办法的,比如node.js,听说可以使用的,但不怎么熟悉。

百无聊赖之余,自己动手写写,可以将头、尾不动,中间内容随时调用。

经测试,可以实现,代码附上:

html:

<body>
	<ul id="list">
		<li><a href="javascript:void(0)" val="1" target="_blank">11111</a></li>
		<li><a href="javascript:void(0)" val="2" target="_blank">22222</a></li>
		<li><a href="javascript:void(0)" val="3" target="_blank">33333</a></li>
		<li><a href="javascript:void(0)" val="4" target="_blank">444444</a></li>
	</ul>
	<div id="wrap"></div>
</body>


js:

$(function(){
<span style="white-space:pre">	</span>var load_href;
	$("#list li a").click(function(){
		var val=$(this).attr("val");
		console.log(val);		
		switch(val){
			case "1":
			load_href="111";
			break;
					
			case "2":
			load_href="222";
			break;
		}
		console.log(load_href);
		$("#wrap").load("page/" +load_href+ ".html")
	})
			
})

自己测试,用的是switch,当然还有很多种方法实现,比如if-else,json等。

记录,以备之后查阅。

html模板,根据链接调用页面展示

原文:http://blog.csdn.net/comeonstone/article/details/43304819

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!