【发布时间】：2011-12-05 01:05:38
【问题描述】：
我想知道通过使用 JQuery 来动态替换 wordpress 网站中的内容有多难。 这是我要发表的文章： http://css-tricks.com/6336-dynamic-page-replacing-content/
我的基本想法是将其javascript文件中引用的元素更改为默认情况下在wordpress中创建的元素。这意味着将 page-wrap 更改为 wrapper，将 main-content 更改为 main-col，并将 guts 更改为 content。
我在尝试替换“guts”时遇到了减速带。由于某种原因，该页面不再显示内容。
反正我整理好之后
我想通了。我会将代码插入我的 wordpress 网站，希望一切顺利。
其中一页：
<body>
<div id="wrapper">
<header></header>
<div class="nav">
<ul class="sf-menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</header>
<section id="main-col">
<div id="content">
<h2>Home</h2>
<p></p>
<p></p>
</div>
</section>
</div>
</body>
</html>
插入到头部的Javascript：
/*
* jQuery hashchange event - v1.2 - 2/11/2010
* http://benalman.com/projects/jquery-hashchange-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($,i,b){var j,k=$.event.special,c="location",d="hashchange",l="href",f=$.browser,g=document.documentMode,h=f.msie&&(g===b||g<8),e="on"+d in i&&!h;function a(m){m=m||i[c][l];return m.replace(/^[^#]*#?(.*)$/,"$1")}$[d+"Delay"]=100;k[d]=$.extend(k[d],{setup:function(){if(e){return false}$(j.start)},teardown:function(){if(e){return false}$(j.stop)}});j=(function(){var m={},r,n,o,q;function p(){o=q=function(s){return s};if(h){n=$('<iframe src="javascript:0"/>').hide().insertAfter("body")[0].contentWindow;q=function(){return a(n.document[c][l])};o=function(u,s){if(u!==s){var t=n.document;t.open().close();t[c].hash="#"+u}};o(a())}}m.start=function(){if(r){return}var t=a();o||p();(function s(){var v=a(),u=q(t);if(v!==t){o(t=v,u);$(i).trigger(d)}else{if(u!==t){i[c][l]=i[c][l].replace(/#.*/,"")+"#"+u}}r=setTimeout(s,$[d+"Delay"])})()};m.stop=function(){if(!n){r&&clearTimeout(r);r=0}};return m})()})(jQuery,this);
$(function() {
var newHash = "",
$mainContent = $("#main-col"),
$pageWrap = $("#wrapper"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("sf-menu").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("content")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + "#content", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("sf-menu a").removeClass("current");
$("sf-menu a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
【问题讨论】：
-
如果您知道自己在做什么，这并不难。尝试发布一些实际代码或指向您的测试版网站的链接。
-
好的，我添加了一些代码。
-
好的，我已经加载了页面以使用普通的 html 文档。我应该如何在 wordpress 上进行测试？
标签： javascript html wordpress dynamic pageload