Question

我目前正在制作一个小菜单，根据点击的内容更改div。因此，如果单击一个，它将显示与其关联的div并隐藏其他，等等。但我无法让它发挥作用，也无法找出原因。任何帮助，将不胜感激。感谢。

以下是我的代码。我已经删除了很多内容。

<script type="text/javascript">
$('.mopHeader').click(function() {
    $('#raid-progress-mop').show();
    $('#raid-progress-cata').hide();
    $('#raid-progress-wotlk').hide();
    $('#raid-progress-tbc').hide();
    $('#raid-progress-vanilla').hide();
});

$('.cataHeader').click(function() {
    $('#raid-progress-mop').hide();
    $('#raid-progress-cata').show();
    $('#raid-progress-wotlk').hide();
    $('#raid-progress-tbc').hide();
    $('#raid-progress-vanilla').hide();
});

$('.wotlkHeader').click(function() {
    $('#raid-progress-mop').hide();
    $('#raid-progress-cata').hide();
    $('#raid-progress-wotlk').show();
    $('#raid-progress-tbc').hide();
    $('#raid-progress-vanilla').hide();
});

$('.tbcHeader').click(function() {
    $('#raid-progress-mop').hide();
    $('#raid-progress-cata').hide();
    $('#raid-progress-wotlk').hide();
    $('#raid-progress-tbc').show();
    $('#raid-progress-vanilla').hide();
});

$('.vanillaHeader').click(function() {
    $('#raid-progress-mop').hide();
    $('#raid-progress-cata').hide();
    $('#raid-progress-wotlk').hide();
    $('#raid-progress-tbc').hide();
    $('#raid-progress-vanilla').show();
});
</script>

<span class="h4">Raid Progress &nbsp; <span class="mopHeader">MoP</span> &nbsp; <span class="cataHeader">Cata</span> &nbsp; <span class="wotlkHeader">WotLK</span> &nbsp; <span class="tbcHeader">TBC</span> &nbsp; <span class="vanillaHeader">WoW</span></span> 


<div id="raid-progress-mop">
    <ul id="raid-mop">
        <li>Content A</li>
    </ul>
</div>

<div id="raid-progress-cata">
    <ul id="raid-cata">
        <li>Content B</li>
    </ul>
</div>

<div id="raid-progress-wotlk">
    <ul id="raid-wotlk">
        <li>Content C</li>
    </ul>
</div>

<div id="raid-progress-tbc">
    <ul id="raid-tbc">
        <li>Content D</li>
    </ul>
</div>

<div id="raid-progress-vanilla">
    <ul id="raid-vanilla">
        <li>Content E</li>
    </ul>
</div>

Answer 1

将您的代码包装在：

$(function(){ ... });

......这是简短形式：

$(document).ready(function(){ ... });

干杯

Answer 2

您需要将脚本放在标记下面。要么是这样，要么把它放在 document.ready 回调中：

$(document).ready(function() {
    // code here
});

问题是，当脚本出现在标记上方时，它将在加载HTML之前执行，因此浏览器还不知道 raid-progress-mop 等。< / p>

Answer 3

jsBin demo

将您的代码包装成一个准备好的结果，我编写的代码就是您所需要的：

$(function(){

  $('span[class$="Header"]').click(function(){
     var classNameSpecific = $(this).attr('class').split('Header')[0];
     $('div[id^="raid-progress-"]').hide();
     $('#raid-progress-'+classNameSpecific).show();     
  });

});

<强>解释

$('span[class$="Header"]') =定位结尾的任何span元素 Header
现在只需将一个点击处理程序附加到所有跨度上要隐藏所有div元素，请执行以下操作：
$('div[id^="raid-progress-"]').hide(); =将隐藏div 以 id开头的raid-progress-个{} 而且你只需要定位包含魔术词的div： $('#raid-progress-'+classNameSpecific).show();

Answer 4

如何在ready()函数中更加动态地执行此操作：

<script type="text/javascript"> 
    $(function() {
        $('[class$="Header"]').on('click', function() {
            var myClass = $(this).attr('class').replace('Header', '');
            $('[id^="raid-progress"]').hide();
            $('#raid-progress-' + myClass).show();
        });
    });
</script>

Answer 5

$（'。mopHeader'）尚未定义。用$（function（）{...}）

包装你的脚本

jQuery .show＆amp; .hide没工作

5 个答案:

jsBin demo