隐藏和切换 3 个不同的 Div Class

Question

我有三个不同的 span.class，我想在它们被点击时显示内容。那些 div 类是：

<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 中所做的，但没有成功。

https://jsfiddle.net/ispykenny/m4n8fzfp/

<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;
    }

Answer 1

所以你基本上想要标签。这可以使用 jQuery:

轻松实现

https://jsfiddle.net/m4n8fzfp/4/

您基本上要做的是使用 data-tab 指令将每个内容 span 与其适当的 link 相关联，并添加和删除 current class 使用适当的 display 属性。

Answer 2

在这里，你基本上只需要检查点击了哪个class，然后先隐藏它们，然后显示你真正想显示的那个（如果class总是匹配向上。)

fiddle: https://jsfiddle.net/m4n8fzfp/3/

$('#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();


})

隐藏和切换 3 个不同的 Div Class

Hiding and Toggle 3 different Div Class

html

javascript

css

jquery

toggle