Javascript jQuery.show和.hide不起作用

我目前正在构建一个小菜单，它将根据单击的div来更改div。因此，如果单击其中一个，它将显示与其关联的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>

---

您需要将脚本放在标记下面。或者将其放入document.ready回调中：

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

问题是，当脚本出现在标记上方时，它将在加载HTML之前执行，因此浏览器还不知道raid进度mop等信息。

将代码包装到：

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

…这是以下内容的简称：

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

---

欢呼声

$“.mopHeader”尚未定义。用$function{…}包装脚本

将代码包装到ready finction中，我编写的这段代码就是您所需要的：

$(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]'=针对类以Header结尾的任何span元素 现在只需将单击处理程序附加到所有跨度。 然后，要隐藏所有div元素，请执行以下操作： $'div[id^=raid进度-]'。隐藏；=将隐藏id以raid进度开头的任何div- 然后，您只需要针对包含神奇单词的div：

---

$'raid-progress-'+classNameSpecific.show

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

---

也许像$'raid-progress-mop'.show.sides.hide这样的东西更可取？您需要将jQuery包装到$document.readyfunction{/*此处！*/}；看一眼这样的代码块，您应该立即思考如何避免重复我自己？除了您最初的问题。每当你发现自己一遍又一遍地剪切和粘贴相同的代码时，你应该寻找简化的方法。这就解决了问题，谢谢。真不敢相信我错过了这样一个O.O，如果允许的话，我会在11分钟内接受它作为答案。+1，在我发布几分钟之前，我在胡闹，没有看到你的答案，太晚了，好了！谢谢@adeneo！哇，你的代表真是太棒了！感谢您在SO+1上所做的努力，对类进行了很好但很难的更改。希望OP不要用类名来设置元素的样式