Question

我有一个包含4项菜单的html页面和4篇文章：

<nav>
    <ul> 
        <li id="startButton"><div>Start</div></li>
        <li id="servicesButton"><div>Services</div></li>
        <li id="offersButton"><div>Offers</div></li>
        <li id="contactButton"><div>Contact</div></li>
    </ul>
</nav>

<article id="start">
    <p>Start text</p>
</article>
<article id="services" hidden="true">
    <p>Services text</p>
</article>
<article id="offers" hidden="true">
    <p>Offers text</p>
</article>
<article id="contact" hidden="true">
    <p>Contacts textº</p>
</article>

加载页面时，只有第一篇文章可见。使用JQuery我想在单击其相应按钮时更改可见文章。我也希望李可以选择。这是我的JQuery：

$(document).ready( function (){
    $('ul').selectable();
    $('li#startButton').click(function() {
        $('#start').show();
        $('#services').hide();
        $('#offers').hide();
        $('#contact').hide();
    });
    $('li#servicesButton').click(function() {
        $('#start').hide();
        $('#services').show();
        $('#offers').hide();
        $('#contact').hide();
    });
    $('li#offersButton').click(function() {
        $('#start').hide();
        $('#services').hide();
        $('#offers').show();
        $('#contact').hide();
    });
    $('li#contactButton').click(function() {
        $('#start').hide();
        $('#services').hide();
        $('#offers').hide();
        $('#contact').show();
    });

});

此脚本的问题在于隐藏和显示部分不能与可选部分一起使用。如果我消除了可选择的线，其余的工作完美。有谁知道如何解决selectable和click之间的这种“不兼容性”？

我正在使用JQuery 2.1.1和JQuery UI 1.11.2

此致德博拉

Answer 1

jQuery不会切换hidden属性，jQuery使用元素的display属性来显示和隐藏。您需要使用CSS类或内联样式更改它。

从代码角度来看，按ID切换元素集是非常低效的。试试这个：

$('nav ul').selected().children('li').click(function() {
    var myIndex = $(this).index();
    var $articles = $(this).closest('nav').siblings('article');
    $articles.hide();
    $articles.eq(myIndex).show();
});

Demo

您会注意到我正在根据列表项的索引选择文章，并且我正在链接selected()和click()方法。

JQuery单击可选列表

1 个答案: