Javascript 是否仅在切换类时显示标题和段落？_Javascript_Jquery_Html_Css

Javascript 是否仅在切换类时显示标题和段落？

javascript jquery html css

Javascript 是否仅在切换类时显示标题和段落？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想显示class=“label”“test 1,2,3,4”和标题2“仅当单击“.card.selected”时才显示某些文本” 我只想在单击名为“.card.selected”的类时显示“标题2”和段落这是我的密码 <!DOCTYPE html> <html> <head> <script src="classie.js"></script> <script src="https://gi

我想显示class=“label”“test 1,2,3,4”和标题2“仅当单击“.card.selected”时才显示某些文本”

我只想在单击名为“.card.selected”的类时显示“标题2”和段落

这是我的密码

  <!DOCTYPE html>
  <html>
  <head>


    <script src="classie.js"></script>


    <script src="https://github.com/desandro/classie/blob/master/classie.js"></script>


  <style> 
  #main {
      width: auto
      height: auto
      border: 1px solid #c3c3c3;
      display: -webkit-flex;  


      -webkit-flex-direction: column;  
      display: flex;
      flex-direction: column;
    margin:10px;

  }

  #main div {
      width: 150px;
      height: 90px;
    display:block;

  }




   .card-container {
    height: 400px;
    perspective: 600;
    position: relative;
    width: 150px;

  }
  .card {
    height: 100%;
    position: absolute;
    transform-styvle: preserve-3d;
    transition: all 0.5s ease-in-out;
    width: 100%;
  }
  .card.selected {
   transform:  translatey(-90px);

  z-index: 99;



  }
  .card .side {
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    width: 100%;


  }




   .

  #card-container: div {
      width: 150px;
      height: 90px;
    display:block;

  }

  .label {
    border: 1px solid black;padding: 2px;margin: 0;
    font-size: 250%;
    float:left;
    background-color: red;
  }
  .button{

       float:left;
  }



   #main img {
  border: 1px solid green;padding: 2px;margin: 0;

      padding: 1px;
      margin: 10;
      width: 400px;
      height:400px;
    display:inline;

  }

  h2 { 

     padding:0 5px;
     position: absolute; 
     top: 40px; 

   text-align: center;
     width: 100%; 
  }



  </style>
  </head>





  <body>

  <div id="main">


            <div >
                  <div class="card" onclick="myFunction(this)">

                        <div class="side">
                      <p class="label"> test 1 </p>

                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="person 1 ">

                        <h2>some text </h2>

               </div>
              </div>
            </div>


        <div >
              <div class="card" onclick="myFunction(this)">

                  <div class="side">
                      <p class="label"> test 2 </p>

                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="person 1 ">
                       <h2>some text </h2>

               </div>
          </div>
        </div>




        <div >
              <div class="card" onclick="myFunction(this)">

                  <div class="side">
                      <p class="label"> test 3 </p>

                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="person 1 ">

                       <h2>some text </h2>

               </div>
          </div>
        </div>



        <div >
              <div class="card" onclick="myFunction(this)">

                  <div class="side">
                      <p class="label"> test 4 </p>

                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="person 1 ">

                       <h2>some text </h2>

               </div>
          </div>
        </div>




        <div >
              <div class="card" onclick="myFunction(this)">

                  <div class="side">
                      <p class="label"> test 5 </p>

                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="person 1 ">

                       <h2>some text </h2>

               </div>
          </div>
        </div>





        <div >
              <div class="card" onclick="myFunction(this)">

                  <div class="side">
                      <p class="label"> test 6 </p>

                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="person 1 ">

                       <h2>some text </h2>

               </div>
          </div>
        </div>



    </div>


          <script>
              function myFunction(el) {      

                     classie.toggle(el, "selected" )// toggle class

                      }
          </script>


  </body>
  </html>


#主要{
宽度：自动
高度：自动
边框：1px实心#C3C3；
显示：-webkit flex；
-webkit柔性方向：列；
显示器：flex；
弯曲方向：立柱；
利润率：10px；
}
#主要部门{
宽度：150px；
高度：90px；
显示：块；
}
.卡片容器{
高度：400px；
前景：600；
位置：相对位置；
宽度：150px；
}
.卡片{
身高：100%；
位置：绝对位置；
变换样式：保留-3d；
过渡：所有0.5s缓进缓出；
宽度：100%；
}
.card.selected{
转换：translatey（-90px）；
z指数：99；
}
.卡片.侧面{
背面可见性：隐藏；
身高：100%；
位置：绝对位置；
宽度：100%；
}
.
#卡片容器：div{
宽度：150px；
高度：90px；
显示：块；
}
.标签{
边框：1px纯黑色；填充：2px；边距：0；
字体大小：250%；
浮动：左；
背景色：红色；
}
.按钮{
浮动：左；
}
#主img{
边框：1px纯绿色；填充：2px；边距：0；
填充：1px；
保证金：10；
宽度：400px；
高度：400px；
显示：内联；
}
h2{
填充：0 5px；
位置：绝对位置；
顶部：40px；
文本对齐：居中；
宽度：100%；
}
测试1
一些文本
测试2
一些文本
测试3
一些文本
测试4
一些文本
测试5
一些文本
测试6
一些文本
函数myFunction（el）{
classie.toggle（el，“selected”）//toggle类
}

这可能就是您需要的

$('.card').click(function (el) {
    $(el.currentTarget).toggleClass('selected');
    console.log($(el.currentTarget));
})

及

完整代码：

这可能是您需要的

$('.card').click(function (el) {
    $(el.currentTarget).toggleClass('selected');
    console.log($(el.currentTarget));
})

及

完整代码：

请提供jsfiddle@KarSho请提供jsfiddle@KarSho