在Joomla中使用JS和PHP替换一个模块

时间:2017-03-22 20:50:03

标签: javascript php jquery joomla

非常需要你的帮助。我的网站上有一个页面,里面有两个模块,上面有一些文章。在左侧,我有一篇Joomla文章,其中包含使用{loadposition}显示一些短消息的模块,以及显示长篇文章的右侧模块。我想制作一个切换器,用另一个模块替换我文章中的模块。我的代码无法正常运行

	

<div id="mods">{loadposition mod1}</div>
<ul>
<li><a id="mod1" href="#mod1"><img /></a></li>
<li><a id="mod2" href="#mod2"><img /></a></li>
</ul>

仅更改文本而非加载模块的脚本正在跟随

 jQuery(document).ready(function() {
  jQuery("#mod1").click(function() {
    jQuery("#mods").html('{loadposition mod1}'); 
  });
  jQuery("#mod2").click(function() {
    jQuery("#mods").html('{loadposition mod2}'); 
  });  
});

我需要加载另一个模块mod2而不是整页加载的mod1。请帮助我的脚本正常工作。

1 个答案:

答案 0 :(得分:0)

在您的代码中

<div id="mods">{loadposition mod1}</div>
<ul>
<li><a id="mod1" href="#mod1"><img /></a></li>
<li><a id="mod2" href="#mod2"><img /></a></li>
</ul>

{loadposition mod1}用于通过解析代码从服务器加载模块mod1,所以如果你使用jQuery,它只会在客户端PC中更改,但不会加载模块。你可能需要ajax。最好是加载两个模块并隐藏一个模块。当有人点击第二个图像时,他们会看到另一个模块。这可能是更好的选择,但我没有测试过:

<div id="mods1">{loadposition mod1}</div>
<div id="mods2" style="display: none">{loadposition mod2}</div>
 <ul>
    <li><a id="mod1" href="#mod1"><img /></a></li>
    <li><a id="mod2" href="#mod2"><img /></a></li>
 </ul>

我的jQuery代码将是

jQuery(document).ready(function() {
  jQuery("#mod1").click(function() {
    $("#mods1").css("display", "block");
    $("#mods2").css("display", "none");
  });
  jQuery("#mod2").click(function() {
    $("#mods2").css("display", "block");
    $("#mods1").css("display", "none");
  });  
});