我有三個按鈕，當你懸停時會改變顏色(精靈)，我想使用這些按鈕，以便當他們被點擊時，不同的內(nèi)容將會顯示。
我已經(jīng)瀏覽了多個教程/板，似乎沒有工作。
按鈕顯示如下:
<div id="buttons">
<a href="#" id="1"class="des"></a>
<a href="#" id="2"class="brnd"></a>
<a href="#" id="3"class="strt"></a>
</div>內(nèi)容所在的div(我最后一次嘗試)如下:
<div id="pages">
<div id="div1"><img src="..."></></div>
<div id="div2"><img src="..."></></div>
<div id="div3"><img src="..."></></div>jQuery -
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attribute("data-id"); // Using a custom attribute.
$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
$(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});
</script>????我的錨似乎是錯誤的。在這種設置下，它會出現(xiàn)在頁面的頂部。當使用錨#1、#2或#3時，它會轉(zhuǎn)到div位置，但不會隱藏或顯示內(nèi)容。令人沮喪。
精靈們工作正常。現(xiàn)在我試圖弄清楚如何使它們可點擊，以便當每個按鈕被點擊時顯示不同的內(nèi)容(3 divs在一個父div下？).如果有人知道如何做到這一點，我將不勝感激。
內(nèi)容主要是圖像，我使用的是前端編輯器木星主題，所以我不知道它是否可能是與此有關(guān)的東西。但是后端似乎沒有任何問題。
此外，如果你能給我一個教程，教我如何使它們在點擊時動畫進出，這將是合法的。再次感謝。
看看我的小提琴。
您發(fā)布的代碼有兩個主要問題，一是混淆了jQuery的數(shù)據(jù)屬性和Javascript id，二是混淆了類的CSS選擇器。)和ids)。以下是更正后的html和javascript:
超文本標記語言
<div id="buttons">
<a href="#" data-id="1" class="des">Des</a>
<a href="#" data-id="2" class="brnd">Brnd</a>
<a href="#" data-id="3" class="strt">Strt</a>
</div>
<div id="pages">
<div id="div1"><p>This is 1</p></div>
<div id="div2"><p>This is 2</p></div>
<div id="div3"><p>This is 3</p></div>
</div>java描述語言
$("#pages div").hide();
$("a").click(function() {
var id = $(this).data("id");
$("#pages div").hide();
$("#div" + id).show();
});你可以簡單的使用隱藏和顯示 這里你的按鈕Id是Buttons
$("#ElementId" or ".Class").onClick(function(){
$("#OtherElement" or ".OtherElement").show()/hide()
});你可以用。切換()在狀態(tài)之間切換 因此
$("#Buttons").click(function(){
$(".brnd").hide();
$(".des").show();
$(".Start").hide();
});也可以使用$("#Buttons ")。onclick(function(){而不是click取決于您的jquery版本
看到鏈接可能是你想要的
試試這個:
點擊這里查看教程，http://api.jquery.com/show/
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#f,#s,#t").hide();
$(".des").click(function(){
$("#f").toggle();
});
$(".brnd").click(function(){
$("#s").toggle();
});
$(".strt").click(function(){
$("#t").toggle();
});
});
</script>http://jsfiddle.net/9SabV/
我已經(jīng)更新了我的答案，因為你更新了你的html，腳本代碼。
也檢查這個 使用#表示id和。上課用的。
http://jsfiddle.net/mdgd7/
我在你的代碼中只發(fā)現(xiàn)了一個問題
$(".div" + id).show();這里代替“.”(點)，就得用“#”。 你必須用這個替換它
$("#div" + id).show();因為你在“div”里用的是“id”，而不是“class”。
更新 你必須去掉這個:
$("#pages div").hide();相反，您將它添加到css文件中:-
#pages div{display:none;}以下是更新后的js腳本:-
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr("id"); // Using a custom attribute.
//$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them
$("#div" + id).fadeIn(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});你的代碼中有一些問題。首先，您沒有將data-id屬性添加到anchor標記中，并嘗試在js代碼中引用它們。html5的“data-”屬性用于存儲標簽中的自定義數(shù)據(jù)。這背后的邏輯是，任何帶有“數(shù)據(jù)前綴”的屬性都不會被處理，而會被呈現(xiàn)為數(shù)據(jù)元素。
那么您在image標簽后添加的閉包是不必要的，并且在語法上是錯誤的，是一個錯誤。
在您的情況下，我們可以簡單地用“id”來處理它，因為不太需要使用數(shù)據(jù)屬性。
簡化的代碼將會是這樣的，
超文本標記語言
<div id="buttons">
<a href="#" id="1"class="des">ONE</a>
<a href="#" id="2"class="brnd">TWO</a>
<a href="#" id="3"class="strt">THREE</a>
</div>
<div id="pages">
<div id="div1">IMG 1</div>
<div id="div2">IMG 2</div>
<div id="div3">IMG 3</div>
</div>射流研究…
$("a").click(function() {
var id = $(this).attr("id"); //retrieving the id
$("#pages div").hide(); // hiding all elements
$("#div" + id).fadeIn(500); // showing the required one only
});半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
#pages div{
display:none;
}動畫:我在動畫中添加了淡入淡出。對于簡單的淡入淡出效果，您可以使用jquery短片動畫，如。向下滑動()。fadeIn()，。動畫()。這里有更多的選擇:http://api.jquery.com/animate/
然而，您可以使用對瀏覽器更友好的CSS3動畫來添加更多自定義動畫。選擇的標準是，如果你需要對動畫和事件跟蹤有更多的控制，你可以選擇jQuery動畫，否則CSS3動畫會非常好用。