Question

我需要一些按钮，点击后会显示相关的div并隐藏其余按钮。

我用Google搜索了下面的代码。它在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>

Answer 1

在脚本开头使用以下内容：

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

Answer 2

您需要将jQuery放在页面末尾，或将其包装在document.ready调用中（例如$( document ).ready(function() {...）。

您尝试在尚不存在的元素上执行代码。 jsFiddle默认为window.onload，这就是它在那里工作的原因。

Answer 3

您需要将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元素。

Answer 4

如果您在本地系统中使用该脚本，请在外部脚本URL中添加“https：”或“http：”协议。

<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>

显示/隐藏div不按预期工作

4 个答案: