Question

请参阅我有这个HTML代码：

<form method="post" id="product_create" action="">
    <ul>
        <li id="tab1"><a href="#">Step 1</a></li>
        <li id="tab2"><a href="#">Step 2</a></li>
        <li id="tab3"><a href="#">Step 3</a></li>
        <li id="tab4"><a href="#">Step 4</a></li>
    </ul>

    <div id="categories-picker"></div>
    <div style="display:none" id="product-select"></div>
    <div style="display:none" id="product-details"></div>
    <div style="display:none" id="product-stock"></div>
</form>

我需要显示/隐藏所有div个其他人而非隐藏的人。在这种情况下，如果我点击li#tab1，那么div#categories-picker应该显示，其他人应该隐藏，无论我在哪里，例如，如果我在div#product-stock。其余的应该是相同的行为。我做了这个代码：

$("#product_create").on("click", "tab1, tab2, tab3, tab4", function() {
    $('#product_create').not($(this)).hide();
});

对此有何建议？也许这是一个更好的方法，但我找不到它

Answer 1

在点击<li>时需要显示的<div>和<li>之间建立某种关系。下面我为每个data添加了display属性<li>，以指示点击每个<div>时显示<form method="post" id="product_create" action=""> <ul> <li id="tab1" data-display="categories-picker"><a href="#">Step 1</a></li> <li id="tab2" data-display="product-select"><a href="#">Step 2</a></li> <li id="tab3" data-display="product-details"><a href="#">Step 3</a></li> <li id="tab4" data-display="product-stock"><a href="#">Step 4</a></li> </ul> <div id="categories-picker"></div> <div style="display:none" id="product-select"></div> <div style="display:none" id="product-details"></div> <div style="display:none" id="product-stock"></div> </form>。

<强> Demo

<div>

然后使用 relation 来显示相应的$("#product_create").on("click", "#tab1, #tab2, #tab3, #tab4", function() { $('#'+$(this).data('display')).show().siblings('div').hide(); return false; });

$("#product_create").on("click", "#tab1, #tab2, #tab3, #tab4", function() {
    var div = $('#'+$(this).data('display'));
    if($.trim(div.html()) !== '') {
        $('#'+$(this).data('display')).show().siblings('div').hide();
    }
    return false;
});

<强>更新

仅当DIV不为空时才更改为DIV

{{1}}

Answer 2

你错过了li孩子 - 应该是：

$("#product_create").on("click", "#tab1, #tab2, #tab3, #tab4", function() {
    $('#product_create li').not($(this)).hide();
});

jsFiddle：http://jsfiddle.net/EJpaW/

Answer 3

给他们一类.tab并使用它：

$("#product_create").on("click",".tab",function() {
   $("#product_create .tab").not($(this)).hide(); 
});

JSFiddle

隐藏/显示所有DIV但选择的那个

3 个答案: