Javascript 隐藏和切换3个不同的Div类

我有三个不同的span.class，我希望在单击它们时显示它们的内容。这些部门类别包括：

<div id="one">
            <span class="aboutme"> <p>About me</p></span>
            <span class="skills"> <p>Skills</p></span>
            <span class="goals"><p>My Goals</p></span>
       </div>

关于我

技巧

我的目标

我确实希望span.aboutme在页面加载时显示，但在单击其他类时隐藏

这是我到目前为止在jsfiddle中所做的，但还没有成功

关于我

技巧

我的目标

对我感到满意
技能内容

目标的科腾特

第三饶舌歌手{
宽度：100%；
高度：自动；
最小高度：400px；
背景色：#F2F2；
边际上限：0px；
填充顶部：0px；
}
.包装三{
最大宽度：1050px；
最小高度：400px；
最小宽度：自动；
高度：自动；
左边距：自动；
右边距：自动；
溢出：隐藏；
边际上限：0px；
填充顶部：0px；
}
.包装纸{
边际上限：0px；
填充顶部：0px；
}
#一个{
最大宽度：525px；
宽度：自动；
高度：自动；
最大高度：400px；
边框：1px纯白；
浮动：左；
字号：80px；
填充：0；
保证金：0；
填充顶部：60px；
字体系列：“Lora”，衬线；
}
#一便士{
文本对齐：居中；
宽度：400px；
填充：0；
保证金：0；
}
#两个{
最大宽度：525px；
宽度：自动；
高度：自动；
最小高度：400px；
溢出：隐藏；
边际上限：0px；
填充顶部：60px；
左侧填充：60px；
}
span.aboutme p{
背景色：#666；
}
.p.技能{
背景色：#999；
}
.目标p{
背景色：#333；
}
.技能内容{
显示：无；
}
.目标内容{
显示：无；
}

所以您基本上需要选项卡。这可以通过使用

jQuery

轻松实现：

---

基本上，您要做的是使用

data tab

指令将每个内容

span

与其相应的链接相关联，并使用相应的

display

属性添加和删除当前的

类。这可以通过使用
jQuery
轻松实现：


基本上，您要做的是使用
数据选项卡
指令将每个内容
span
与其相应的链接相关联，并使用相应的
显示属性添加和删除当前的
类，首先隐藏它们，然后显示您真正想要显示的（如果类总是匹配的话）

小提琴：

在这里，您基本上只需要检查单击的是哪个类，首先隐藏它们，然后显示您真正想要显示的类（如果类总是匹配的话）

小提琴：

嘿，杰西，非常感谢你的帮助。这就是我需要的。没问题：）如果这对你有帮助，你应该接受答案！嘿，杰西，非常感谢你的帮助。这就是我需要的。没问题：）如果这对你有帮助，你应该接受答案！
<div class="thirdwrapper">
     <div class="wrapperthree">
       <div id="one">
            <span class="aboutme"> <p>About me</p></span>
            <span class="skills"> <p>Skills</p></span>
            <span class="goals"><p>My Goals</p></span>
       </div>



        <div id="two">
        <span class="aboutmecontent">
        <p>content for about me
        </span>
        <span class="skillscontent"> <p>content for skills</p> </span>
        <span class="goalscontent"> <p>cotent for goals</p></span>
    </div>
      </div>
        </div>
          </div>

    .thirdwrapper{
        width: 100%;
        height: auto;
        min-height: 400px;
        background-color: #F2F2F2;
        margin-top: 0px;
        padding-top: 0px;

    }
    .wrapperthree{
        max-width: 1050px;
        min-height: 400px;
        min-width: auto;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        margin-top: 0px;
        padding-top: 0px;
    }
    .wrapperthree p{
        margin-top: 0px;
        padding-top: 0px;


    }
    #one{
        max-width: 525px;
        width: auto;
        height: auto;
        max-height: 400px;
        border:1px solid white;
        float: left;
        font-size: 80px;
        padding: 0;
        margin: 0;
        padding-top: 60px;
        font-family: 'Lora', serif;
    }

    #one p{
        text-align:center;
        width:400px;
        padding: 0;
        margin: 0;


    }

    #two{
        max-width: 525px;
        width: auto;
        height: auto;
        min-height: 400px;
        overflow: hidden;
        margin-top: 0px;
        padding-top: 60px;
        padding-left: 60px;

    }
    span.aboutme p {
        background-color:#666;

    }
    .skills p{
        background-color: #999;
    }
    .goals p{
        background-color: #333;
    }
    .skillscontent p{
        display: none;
    }
    .goalscontent p{
        display: none;
    }

$('#one span').click(function () {
    var that = $(this);
    var className = that[0].className;
    console.log($(this)[0].className);

    $('#two').children('span').children('p').hide();


    $('#two').find('.' + className + 'content p').show();


})