jquery选项卡 | phper `blog

jquery ajax tab简单网页选项卡切换

By admin 2014年5月4日 Javascript No Comments

2674

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery ajax tab选项卡制作简单网页模板单页选项卡切换</title>
<meta name="description" content="jquery ajax tab选项卡通过鼠标点击导航条标签选项卡滑动切换，内容异步加载选项卡切换。简单的网页模板单页选项卡切换展示。" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<style type="text/css">
@import url(style.css);
</style>
<script type="text/javascript">
$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});

$('#nav li a').click(function(){

var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;

});

});
</script>
</head>
<body>

<div id="wrapper">
<h1>jquery ajax tab选项卡制作简单网页模板单页选项卡切换</h1>
<ul id="nav">
<li><a href="index.html">欢迎访问</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="portfolio.html">投资组合</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="terms.html">条款</a></li>
</ul>
<div id="content">
<h2>欢迎访问!</h2>
<p>您好， - “如何载入和动画内容与jQuery”</p>
<p>在本教程中，我们将采取平均每天网站，并加强与jQuery。我们将添加AJAX功能，使有关的容器，而不是用户的内容加载到导航到另一个页面。我们也将整合一些真棒效应...</p>
</div>
</div>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jquery ajax tab选项卡制作简单网页模板单页选项卡切换</title>

@import url(style.css);

</style>

$(document).ready(function() {

var hash = window.location.hash.substr(1);

var href = $('#nav li a').each(function(){

var href = $(this).attr('href');

if(hash==href.substr(0,href.length-5)){

var toLoad = hash+'.html #content';

$('#content').load(toLoad)

}

});

$('#nav li a').click(function(){

var toLoad = $(this).attr('href')+' #content';

$('#content').hide('fast',loadContent);

$('#load').remove();

$('#wrapper').append('<span id="load">LOADING...</span>');

$('#load').fadeIn('normal');

window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

function loadContent() {

$('#content').load(toLoad,'',showNewContent())

}

function showNewContent() {

$('#content').show('normal',hideLoader());

}

function hideLoader() {

$('#load').fadeOut('normal');

}

return false;

});

</script>

</head>

<body>

<h1>jquery ajax tab选项卡制作简单网页模板单页选项卡切换</h1>

</ul>

<p>您好， - “如何载入和动画内容与jQuery”</p>

<p>在本教程中，我们将采取平均每天网站，并加强与jQuery。我们将添加AJAX功能，使有关的容器，而不是用户的内容加载到导航到另一个页面。我们也将整合一些真棒效应...</p>

</div>

</body>

</html>

百度网盘下载地址:http://pan.baidu.com/s/1sjyenFJ