0

我目前正在构建一个小菜单，该菜单将根据单击的一个来更改 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>
4

5 回答 5

4

将您的代码包装在：

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

...这是以下的简写形式：

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

干杯

于 2012-08-20T21:43:35.963 回答
2

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

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

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

于 2012-08-20T21:43:17.677 回答
2

jsBin 演示

将你的代码包装成一个现成的 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"]')= 定位任何span以类结尾的 Header
元素 现在只需将点击处理程序附加到所有跨度。
比，隐藏你所有的div元素：
$('div[id^="raid-progress-"]').hide();= 将隐藏任何div以andid 开头 raid-progress-
的元素， 而不是你只需要定位div包含魔法词的元素： $('#raid-progress-'+classNameSpecific).show();

于 2012-08-20T21:51:56.580 回答
2

如何在函数内部更动态地执行此操作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>
于 2012-08-20T21:55:40.690 回答
0

$('.mopHeader') 尚未定义。用 $(function(){...}) 包装你的脚本

于 2012-08-20T21:44:26.460 回答