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/

您基本上做的是使用span指令将每个内容data-tab与其相应的链接相关联，然后添加和删除current {{1}使用适当的class属性。

Answer 2

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

小提琴：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类

2 个答案: