0

看到我有这个 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();
});

对此有何建议？也许是一个更好的方法来做到这一点，但我没有找到

4

3 回答 3

1

在单击这些 s 时需要显示的<li>s 和s之间建立某种关系。下面我为每个属性添加了一个属性，以指示单击每个属性时要显示的属性。<div><li>datadisplay<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>

然后使用该关系来显示适当的<div>

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

更新：

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

$("#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;
});
于 2013-08-23T15:59:32.607 回答
0

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

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

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

于 2013-08-23T15:50:31.617 回答
0

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

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

JSFiddle

于 2013-08-23T15:57:00.897 回答