使用jQuery点击标签切换div块内容

今天所教学的内容是使用jQuery点击标签使其div块内容的切换，主要是我在项目中运用到，所以特此记录一下，供自己和广大博友回忆知识。

HTML内容

<ul class="watermelon">
    <li class="SupendButton-one">数学</li>
    <li>语文</li>
    <li>英语</li>
</ul>
<div class="apple">
    <div>数学课知识</div>
    <div>语文课知识</div>
    <div>英语课知识</div>
</div>

在html中我给ul和div分别设置了css样式，是为了获取到li和div块，所以没有设置css样式，你们如果需要写样式就可以写。其实也可以通过id来获取。

$(window).load(function(){
        $(".apple>div").eq(0).show().siblings().hide();
        //此步骤是为了获取到相对应数学的div块  
    });

    $(".watermelon>li").click(function () {  //li的单击事件
        // $(this).addClass("SupendButton-one").siblings().removeClass("SupendButton-one");
        //此步骤我注释掉是因为你如果需要在li中写样式，他会清除掉你的样式
        var index = $(this).index();
        //获取下标
        $(".apple>div").eq(index).show().siblings().hide();
        //通过下标来展现出div块
    })
    

因为这个项目他需要对应的div块出现，所以最先出现的div就设置了本身的css，在其他div块上设置了display：none；隐藏掉先不出现的div块，等待点击后出现。
此次就是我分享的内容，觉得哪里不对的可以指出来。以供大家更好学习。