內容之間切換使用jQuery

我必須做這樣的事情，我的jQuery的知識是不夠:(

<div id="dog-button"></div> 
<div id="cat-button"></div> 

<div id="dog"></div> 
<div id="cat"></div>

我們有兩個按鈕當你點擊的狗按鈕，狗-DIV應該當您單擊貓按鈕出現，出現在貓DIV（在準確的位置，但我想這只是CSS），其重要的是，該網站的負載與狗並不只顯示什麼，你有什麼想法:-(

來源

2011-07-15 Julius Koroll

是否divs包裹在任何具體的東西？我得到的關聯ebtween'狗button' /''dog'和'貓button' /'cat'但你怎麼能指望隱藏不涉及特定按鈕的div被點擊？ –

是否只有2個按鈕和2組內容？還是會有更多？ – Patricia

這裏的代碼，會爲你工作的jsfiddle，但是規模，你需要做的編碼（您將需要添加到$少量（'＃ dog，#cat'）。hide（）;行中的所有額外的div隱藏）：

http://jsfiddle.net/KRPZS/

 
$('div[id$="-button"]').live('click', function() { 
    $('#dog, #cat').hide(); 
    $('#' + $(this).attr('id').replace('-button', '')).show(); 
});

來源

2011-07-15 16:59:53 Jasper

大聲笑，真棒圖片使用：D非常感謝你們！ –

HTML：？

<div id="dog-button"></div> 
<div id="cat-button"></div> 

<div id="dog"></div> 
<div id="cat" style="display: none;"></div>

的Javascript：

<script type="text/javascript"> 
    $(function(){ 
     $('#dog-button').click(function(){ 
      $('#cat').hide(); 
      $('#dog').show(); 
     } 

     $('#cat-button').click(function(){ 
      $('#dog').hide(); 
      $('#cat').show(); 
     } 
    }); 
</script>

來源

2011-07-15 16:51:53 Paulpro

沒有真正可擴展的，因爲你需要爲每一個標籤/內容對新事件... – jondavidjohn

它很可能是一個好主意，有「#cat」隱藏在jQuery的一樣，所以它緩慢下降，當JavaScript不可用。 – Dan

它不需要在兩個div之間切換。如果有兩個以上的可能，但我認爲這是最簡單的對他的情況下，更易讀，所以他能理解它，即使他不是很熟悉的jQuery。 – Paulpro

$("#dog-button,#cat-button").click(function() { 
    var divToOpen = $(this).attr("id").replace("-button",""); 
    $("#dog,#cat").hide(); 
    $("#"+divToOpen).show(); 
});

演示：http://jsfiddle.net/uhcHV/

來源

2011-07-15 16:55:25 Sotiris

沒有任何理由讓jquery獲取id this.id就足夠了。 – jondavidjohn

**另外，請注意，這將您鎖定到按鈕/ div的命名約定中...... ** – jondavidjohn

@jondavidjohn這兩個聲明都是正確的。關於第二，我的代碼與OP代碼有關。可以選擇符合他的要求的任何答案:) – Sotiris

你可以嘗試沿着這些路線的東西：

HTML：

<div class='button' id="dog-button"></div> 
<div class='button' id="cat-button"></div> 

<div class='content' id="dog"></div> 
<div class='content' id="cat"></div>

的Javascript：

$(document).ready(function() { 
    $('#cat').hide(); 

    $('.button').click(function(){ 
     $('.content').toggle(); 
    }); 
});

來源

2011-07-15 16:56:02 Dan

'＃貓'將首次顯示！：D – Shef

這有點像你正在尋找：

HTML

<a href='#' data-id='dog' class='button'>Dog Button</a> 
<a href='#' data-id='cat' class='button'>Cat Button</a> 

<div id='dog' class='animal'>Woof!</div> 
<div id='cat' class='animal'>Meow!</div>

CSS

.animal{ 
display:none; 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #f2f2f2; 
}

JAVASCRIPT

$(document).ready(function(){ 

    $('.button').click(function(evt){ 
     evt.preventDefault(); 

     var id = $(this).data('id'); 
     $('.selected').hide().removeClass('selected'); 
     $('#' + id).addClass('selected').show(); 
    }); 

});

看看這個的jsfiddle：http://jsfiddle.net/KVvQV/

希望這有助於。

鮑勃

來源

2011-07-15 17:01:21 rcravens

內容之間切換使用jQuery

回答

相關問題