显示/隐藏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无法按预期工作

回答

相关问题