顯示/隱藏div無法按預期工作

我需要一些按鈕，點擊後會顯示相關的div s並隱藏其餘部分。顯示/隱藏div無法按預期工作

我使用了下面的代碼。它在jsfiddle.net上按預期工作，但它不在我的服務器上。我得到這樣的事情，當然還有「按鈕」不工作，以及：

button1 button2 button3 button4 button5 
part1 
part2 
part3 
part4 
part5

代碼：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$('.showSingle').on('click', function() { 
    $(this).addClass('selected').siblings().removeClass('selected'); 
    $('.targetDiv').hide(); 
    $('#div' + $(this).data('target')).show(); 
}); 
$('.showSingle').first().click(); 
</script> 

<div class="buttons"> 
    <a class="showSingle" data-target="1">button1</a> 
    <a class="showSingle" data-target="2">button2</a> 
    <a class="showSingle" data-target="3">button3</a> 
    <a class="showSingle" data-target="4">button4</a> 
    <a class="showSingle" data-target="5">button5</a> 
</div> 

<div id="div1" class="targetDiv">part1</div> 
<div id="div2" class="targetDiv">part2</div> 
<div id="div3" class="targetDiv">part3</div> 
<div id="div4" class="targetDiv">part4</div> 
<div id="div5" class="targetDiv">part5</div>

來源

2014-08-27 fishmong3r

我會建議你使用「mixitup」 jQuery插件。看看這個例子http://www.jqueryscript.net/demo/jQuery-Plugin-For-Filtering-Sorting-Html-Elements-MixItUp/或https://mixitup.kunkalabs.com/ – 2014-08-27 14:27:28

現在的代碼正常工作：http://jsfiddle.net/j08691/17psur23/提供您正確的順序執行它。 – j08691 2014-08-29 13:30:20

使用你的腳本的開頭如下：

$(document).ready(function(){ 
    //Your logic 
});

來源

2014-08-27 14:26:50 ltalhouarne

你需要或者把你的jQuery在頁面的結束，或將其包裝在document.ready呼叫中（例如$(document).ready(function() {...）。

您試圖對尚不存在的元素執行代碼。 jsFiddle默認爲一個window.onload，這就是爲什麼它在那裏工作。

來源

2014-08-27 14:25:24 j08691

它仍然是一樣的。 – fishmong3r 2014-08-29 10:53:25

您在瀏覽器控制檯中遇到什麼錯誤？ – j08691 2014-08-29 13:05:54

無。我看不到任何錯誤。 – fishmong3r 2014-08-29 13:07:43

您需要將您的jquery代碼放入一個文檔就緒區塊中。這應該是這樣的

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.showSingle').on('click', function() { 
    $(this).addClass('selected').siblings().removeClass('selected'); 
    $('.targetDiv').hide(); 
    $('#div' + $(this).data('target')).show(); 
    }); 
    $('.showSingle').first().click(); 
}); 
</script>

此塊主要是告訴jQuery來只有一次的DOM已經加載執行代碼包圍，這是必需的爲你的代碼操縱DOM元素。

來源

2014-08-27 14:25:43

它仍然是一樣的。 – fishmong3r 2014-08-29 10:52:46

很奇怪，你用什麼服務器來提供你的html？ – 2014-08-29 11:05:32

實際上，它是SharePoint 2010網站上的內容編輯器Web部件。我用同樣的方法使用數十個js/html腳本，所有這些腳本都可以正常工作。 – fishmong3r 2014-08-29 11:08:35

如果您使用的是您的本地系統中的腳本，添加「https：」開頭或「HTTP：」協議在外部腳本的URL。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

你的jQuery方法的文檔準備好事件中：

<script type="text/javascript"> 
$(document).ready(function(e) { 
$('.showSingle').on('click', function() { 
    $(this).addClass('selected').siblings().removeClass('selected'); 
    $('.targetDiv').hide(); 
    $('#div' + $(this).data('target')).show(); 
}); 
    $('.showSingle').first().click(); 
}); 
</script>

來源

2014-08-27 14:51:15 sakthivel

顯示/隱藏div無法按預期工作

回答

相關問題