0

参考这里的主题

我在这里使用这个模板来构建我的网站//link

在右边有一个显示不同列表项的 javascript

我正在尝试创建两个列表。用户可以单击顶部的链接并选择他想要查看的列表。

代码是这样的

<div id="right-column">

<a href="#" onclick="toggleVisibility('x');">X</a>

<a href="#" onclick="toggleVisibility('Y');">Y</a>

<div id="x" class="section">
<ul id="portfolio">
<li>...</li>
<li>...</li>
</ul>
</div>

<div id="y" class="section" style="display:hide">
<ul id="portfolio">
<li>...</li>
<li>...</li>
</ul>
</div>

</div>

jQuery

$(document).ready(
                function(){
                    $('#news').innerfade({
                        animationtype: 'slide',
                        speed: 750,
                        timeout: 2000,
                        type: 'random',
                        containerheight: '1em'
                    });
                    
                    $('ul#portfolio').innerfade({
                        speed: 1000,
                        timeout: 5000,
                        type: 'sequence',
                        containerheight: '220px'
                    });
                    
                    $('.fade').innerfade({
                        speed: 1000,
                        timeout: 6000,
                        type: 'random_start',
                        containerheight: '1.5em'
                    });
                    
                    $('.adi').innerfade({
                        speed: 'slow',
                        timeout: 5000,
                        type: 'random',
                        containerheight: '150px'
                    });
            }); 

function toggleVisibility(newSection) {
    $(".section").not("#" + newSection).hide();
    $("#" + newSection).show();
}

可见性代码工作正常..

我的问题是：

1 滑块不适用于第二个列表

2 当我单击“Y”以显示第二个列表时，下面的 div 中的文本被下推

请帮忙..

4

1 回答 1

1

您列表中的重复 ID 将破坏 js 行为：

<ul id="portfolio">

在每个列表上都无法正常工作，每个页面的 ID 都必须是唯一的

于 2013-01-17T16:51:46.513 回答