切換衆多元素的內容jQuery

我有一個主要的div在頁面頂部與h1，p和鏈接在本節中。然後下面我有很多其他的div在他們的不同內容h3，p，a。切換衆多元素的內容jQuery

這些div中還包含一個單獨的鏈接。點擊此鏈接，我希望內容與主要部分的內容切換。例如

如果你看這個的jsfiddle我已經創建了：https://jsfiddle.net/ow1nLh0a/3/

我只能似乎內容切換，如jQuery的內下方 - 但這是沒有用的。

$(".this-changes").click(function() { 
    $(".main-area h1").fadeOut(function() { 
     $(".main-area h1").text(($(".main-area h1").text() == 'Title Goes here') ? 'Different Title' : 'Title Goes here').fadeIn(); 
    }) 
})

如果您是按下更改較小的div中的'Change Link'文本。然後，上面的h1將替換爲面板中的h3，鏈接被點擊的位置與p相同，並且與按鈕鏈接相同。我可以爲1個面板做到這一點沒有問題，但一旦開始進入倍數，就會變得更加困難。我只在示例中創建了3個較小的面板（活版本中會有很多）。

感謝

來源

2017-02-03 alexgomy

你想要做什麼是一個句柄傳遞給已經被點擊了鏈接，然後尋找兄弟h3，然後可以使用它的html來代替h1。 – MCMXCII

不知道我理解你的要求，但這裏是我想你的意思是：

$(document).ready(function() { 
    $(".this-changes").click(function() { 
      $panel = $(this).parents('.panel'); 
     $(".main-area > h1").fadeOut(function() {  
      $(this).html($panel.find('h3').html()).fadeIn(); 
     }); 
     $(".main-area > p").fadeOut(function() {  
      $(this).html($panel.find('p').html()).fadeIn(); 
     }); 
     $(".main-area > a").fadeOut(function() {  
      $(this).replaceWith($panel.find('a.button').clone()).fadeIn(); 
     }); 
    }) 
});

來源

2017-02-03 16:57:32

這是完美的。謝謝：-） – alexgomy

你想要做的是傳遞一個句柄被點擊的鏈接，然後尋找兄弟H3，那麼你可以使用它的HTML來代替H1。

$(document).ready(function() { 
    $(".this-changes").click(function (event) { 
     h3 = $(event.target).siblings('h3') 
     $(".main-area h1").fadeOut(function() { 
      $(".main-area h1").text(h3.html()).fadeIn(); 
     }) 
    }) 
});

https://jsfiddle.net/ow1nLh0a/5/

來源

2017-02-03 16:45:03 MCMXCII

只需要更進一步，https://jsfiddle.net/ow1nLh0a/6/這就是你將如何去做其他元素。 – MCMXCII

這是非常完美的歡呼:-)只是一件事。我更新了這個：https：//jsfiddle.net/ow1nLh0a/8/子按鈕鏈接是否也可以傳遞到主區域中的按鈕鏈接？ – alexgomy

切換衆多元素的內容jQuery

回答

相關問題