Question

我在左边有一个菜单4＆lt; li＆gt;项目，右边有4个div，每个项目一个，用鼠标输入项目应显示其中一个div。

之类的东西

<ul><li onmouseover="javascript:showDiv("div1");">one</li><li  onmouseover="javascript:showDiv("div2");">two</li>(4 li)</ul>

其中showDiv（id）显示div并隐藏另一个div。

div：

<div id="menu1">menu1</div>
<div id="menu2" style="display:none;">menu2</div>
<div id="menu3" style="display:none;">menu3</div>
<div id="menu4" style="display:none;">menu4</div>

Javascript代码：

function fadeBetweenDivs( div1, div2 ) {
 $$( div1 ).fade( "out" );
 (function(){
  $$( div1 ).setStyles({
   display: 'none',
   opacity: 0
  });
 }).delay( 150 );
 (function(){
  $( div2 ).setStyles({
   display: 'block',
   opacity: 0
  });
 }).delay( 150 );
 $$( div2 ).fade( "in" );
}
function findDiv() {
 var arrayDiv = ["menu1","menu2","menu3","menu4"];
 for (i=0;i<arrayDiv.length;i++) {
  var blockDiv = document.getElementById(arrayDiv[i]).style.display;
  if (blockDiv = "block") {
   var viewedDiv = arrayDiv[i];
   return viewedDiv;
  }
 }
}
function showDiv(showdiv) {
 var hidediv = findDiv();
 fadeBetweenDivs(hidediv,showdiv);
}

代码addEvent等有效，我不会在这里粘贴它。执行的函数是showDiv（“div id”）;

我找不到问题。你能告诉我如何让它发挥作用或者至少是一种淡化div的简单方法吗？

（Mootools的作品，我正在使用Joomla）

Answer 1

您的代码中存在很多错误。我试着做一个小例子来帮助你理解问题并轻松找到解决方案。希望它有所帮助！

http://goo.gl/TzlSt

如果您有任何疑问，请随时问我;）

Mootools：在菜单中的div之间淡入淡出

1 个答案: