一个按钮工作，其他不，相同的脚本

我明白了

        <div id="container">
        <img src="images/4.png" />
        <ul class="menu">
            <li id="menu-0"> <p class="menuP" id="button0">                                                 </p></li>
            <li id="menu-1"> <p class="menuP" id="button1"> <a id="abutton1" onclick="animatedown1()">  </a></p></li>
            <li id="menu-2"> <p class="menuP" id="button2"> <a id="abutton2" onclick="animatedown2()">  </a></p></li>
            <li id="menu-3"> <p class="menuP" id="button3"> <a id="abutton3" onclick="animatedown3()">  </a></p></li>
            <li id="menu-4"> <p class="menuP" id="button4"> <a id="abutton4" onclick="animatedown4()">  </a></p></li>
            <li id="menu-5"> <p class="menuP" id="button5">                                                 </p></li>
        </ul>
    </div> 
    <div id="bgRepeat1"> 
        <div class="textContainer" id="textContainer1">  <!-- only one of these is visible at any given time -->                      
            <p> container 1 </p>
        </div>
        <div class="textContainer" id="textContainer2">
            <p> container 2 </p>
        </div>
        <div class="textContainer" id="textContainer3">
            <p> container 3 </p>
        </div>
        <div class="textContainer" id="textContainer4">
            <p> container 4 </p>
        </div>
    </div>

这是我为

找到的javascript

function animatedown1()
{
    alert('start1');
    $("#textContainer1").animate({  
        opacity:'0'
        },800, function(){
        alert('end1');});
}

在第一个例子中有效，但在其他

中不起作用

function animatedown2()
{
    alert('start2');
    $("#textContainer2").animate({  
        opacity:'0'
        },800, function(){
        alert('end2');});
}

我认为没有必要张贴其他2 (animatedown3和4)

ok so…其基本思想是:我有4个按钮，它们是列出来的(button0和button5没有任何作用，它们只是列出来的)例如，单击button1时，应该显示textcontainer1，并隐藏

之前显示的任何内容。

基本上是一个动画菜单，没有链接到其他页面，都在一个页面中。

现在它只工作，如果我点击button1，它隐藏textcontainer1(我知道它应该显示它，这只是为了看看按钮是否工作)，这很好。问题在这里:当我点击button2 3 4时什么都没有发生，我在这些按钮中实现了alert()所以我可以看到脚本是否启动但它没有启动，它只对button1

有效

所有4个函数几乎相同，但如果我发现，如果我在animatedown1()部分$("#textContainer1")与$("#textContainer2")它适用于textContainer2 ..所以这让我认为，出于某种原因，只有第一个函数有效。

任何帮助都将是非常感激的。

PS:我试着用

做这个

$("#menu-1").click(function() {
    $("#textContainer1").animate({
        opacity:'0'
        },800, function(){
        alert('wtf');});
    });

但在这里我不能让它注册我的点击菜单-1(也尝试与ID的button2和abutton2)任何带有。click或onclick功能的解决方案都将受到赞赏。

http://www.byforthewind.hit.bg/

编辑:我发现什么是错的…当我检查我的javascript时，我看到在所有4个函数的下方，还有另外3个(除了第1个)具有相同的名称但为空。这就是为什么只有第一个函数有效，其他3个被页面底部的空函数覆盖。

<div id="container">
    <ul class="menu">
        <li id="menu-0"><p class="menuP" id="button0"></p></li>
        <li id="menu-1"><p class="menuP" id="button1"><a id="abutton1" onclick="animateContainer($('#textContainer1 p'))">container 1 </a></p></li>
        <li id="menu-2"><p class="menuP" id="button2"><a id="abutton2" onclick="animateContainer($('#textContainer2 p'))">container 2 </a></p></li>
        <li id="menu-3"><p class="menuP" id="button3"><a id="abutton3" onclick="animateContainer($('#textContainer3 p'))">container 3 </a></p></li>
        <li id="menu-4"><p class="menuP" id="button4"><a id="abutton4" onclick="animateContainer($('#textContainer4 p'))">container 4 </a></p></li>
        <li id="menu-5"><p class="menuP" id="button5"></p></li>
    </ul>
</div>
<div id="bgRepeat1">
    <div class="textContainer" id="textContainer1">  <!-- only one of these is visible at any given time -->
        <p> container 1 </p>
    </div>
    <div class="textContainer" id="textContainer2">
        <p> container 2 </p>
    </div>
    <div class="textContainer" id="textContainer3">
        <p> container 3 </p>
    </div>
    <div class="textContainer" id="textContainer4">
        <p> container 4 </p>
    </div>
</div>
<script type="text/javascript">
    function animateContainer(container)
    {
        container.animate( { opacity :0 }, 800, function() { console.log("ended") } );
    }
</script>