jquery onclick加載div

我可以知道是否有可能在jQuery中做到這一點？jquery onclick加載div

我有一個類別鏈接：

<ul> 
<li><a href="#">Tools</a></li> 
<li><a href="#">Moulds</a></li> 
<li><a href="#">Videos</a></li> 
</ul>

和內容通過DIV

<div id="tools">This is the tools content</div> 
<div id="moulds">This is the moulds content</div> 
<div id="videos">This is the videos content</div>

分隔在默認情況下，它會顯示工具，內容和其他三三兩兩（模具和視頻）DIV是隱藏的。他們只顯示菜單點擊。最重要的是，當加載其他div或類似淡入淡出動畫時可以加載圖片？

可以這樣做嗎？我搜索了超過stackoverflow，但他們沒有滿足我想要什麼..

謝謝你提前！

來源

2013-03-24 Jeff

是的，當然可以做到。你有哪些部分有問題？ – JJJ 2013-03-24 13:37:51

你可以把這樣的動畫http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ – btevfik 2013-03-24 13:39:48

爲什麼你不使用標籤/類似的東西。不管怎麼說，你可以做到這一點的方式，但在此之前，更改HTML這樣：

<ul> 
    <li><a href="#tools">Tools</a></li> 
    <li><a href="#moulds">Moulds</a></li> 
    <li><a href="#videos">Videos</a></li> 
</ul>

而且在JavaScript給這樣：

$("ul li a").click(function(){ 
    theDiv = $(this).attr("href"); 
    $(theDiv).show(); 
});

如果你只想顯示一個div，你能做到這樣：

$("ul li a").click(function(){ 
    $("div").hide(); 
    theDiv = $(this).attr("href"); 
    $(theDiv).show(); 
});

我的建議是，使用通用類的<div> S和<a>小號兩種。

最後，你可能會到達這樣的：

<ul> 
    <li><a class="link" href="#tools">Tools</a></li> 
    <li><a class="link" href="#moulds">Moulds</a></li> 
    <li><a class="link" href="#videos">Videos</a></li> 
</ul> 

<div class="tab" id="tools">This is the tools content</div> 
<div class="tab" id="moulds">This is the moulds content</div> 
<div class="tab" id="videos">This is the videos content</div>

然後，該事件處理是：

$(".link").click(function(){ 
    $(".tab").hide(); 
    theDiv = $(this).attr("href"); 
    $(theDiv).show(); 
});

來源

2013-03-24 13:37:51

這正是我想要的，但默認它顯示所有3格，我只需要工具div默認顯示，其他兩個隱藏，直到鏈接點擊它只顯示。最重要的是可以添加淡入淡出動畫點擊加載時？ – Jeff 2013-03-24 13:49:57

@Yvonnesecret你有沒有看到[jQuery API]（http://api.jquery.com）？ – 2013-03-24 13:50:49

nope ..我完全沒有學習jQuery之前，這就是爲什麼即時通訊問這個問題:)動畫可能並不重要，但最重要的是我只想要工具div加載默認和不是所有3 div ...[demo]（http://jsfiddle.net/UgaSv/） – Jeff 2013-03-24 13:53:54

衰落在jQuery的相當容易。這裏的樣本

<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
</head> 
<body> 
<h1>js test</h1> 

<ul id="myMenu"> 
    <li><a href="#" data-id="tools">Tools</a></li> 
    <li><a href="#" data-id="modules">Moulds</a></li> 
    <li><a href="#" data-id="videos">Videos</a></li> 
</ul> 

<div class="subcontent" id="tools" style="display:block">tools</div> 
<div class="subcontent" id="modules">modules</div> 
<div class="subcontent" id="videos">videos</div> 

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $('#myMenu').on('click','a',function() 
    { 
     // fade out all open subcontents 
     $('.subcontent:visible').fadeOut(); 
     // fade in new selected subcontent 
     $('.subcontent[id='+$(this).attr('data-id')+']').fadeIn(); 
    }); 
}); 
</script> 

<style type="text/css"> 
    div.subcontent { display:none; } 
</style>

我們註冊$（ '＃MYMENU'）事件處理程序。在（..）女巫偵聽一個連接元件（A）的點擊和首先淡出打開（可見）divs。那麼它就開始淡入。在這種情況下，淡出和淡入方法同時開始。使用回調函數，您可以相互調用這兩個步驟。

來源

2013-03-24 14:03:36 roman

jquery onclick加載div

回答

相關問題