bugfix> javascript > 投稿

私はボタン/麻酔薬に関して非常に甘いコードペンを見つけて、チームが構築しようとしているものに合うようにそれを再利用しました。基本的には、ボタンを左側に垂直に下げて、右側に大きなdivを配置します。左側の特定のボタンをクリックすると、右側のdivが変更され、適切なコンテンツが表示されます。読んだ後、jQueryがこの機能の答えであるように見えます。 jQueryを実際にコーディングしたことは一度もないので、まだ何も正しく動作しませんでした。必要なものが2つあります。

  • 左側のボタンをクリックすると、コンテンツを変更するために右側のdivが必要になります。
  • 左側のボタンがアクティブになっているとき、スタイリングをホバーしたときの外観のままにしておきます。

誰かがガイダンスを提供できますか?ありがとう!

#wrapper {
  text-align: center;
}
.bt_wrap {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  background: gray;
  width: 100px;
  height: 100px;
  cursor: pointer;
  perspective: 200px;
  transition: background 0.2s ease-out;
}
.box {
  position: absolute;
  perspective-origin: 50px 50px;
  transform-origin: 50px 50px;
  transition: transform 0.2s ease-out;
  transform-style: preserve-3d;
}
.icon,
.icon2 {
  position: absolute;
  top: 0;
  left: 20px;
  margin-top: 20px;
  background: black;
  color: #fff;
  width: 60px;
  height: 60px;
  font-size: 2em;
  line-height: 60px;
  transition: background 0.2s ease-out;
  transform: translate3d(0px, 0px, 30px) rotateY(0deg);
}
.icon2 {
  background: black;
  transform: translate3d(29px, 0px, 0px) rotateY(90deg);
  transition: background 0.2s ease-out;
}
.bt_wrap:hover {
  background: blue;
}
.bt_wrap:hover .icon {
  background: black;
}
.bt_wrap:hover .icon2 {
  background: black;
  color: blue;
}
.bt_wrap:hover .box {
  transform: rotateY(-90deg);
}
.started {
  font-size: 0.75em;
  position: absolute;
  bottom: 4px;
  right: 4px;
  color: green;
  background: white;
  border-radius: 50%;
  width: 1em;
}
.main {
  display: flex;
}
.content {
  width: 100%;
  padding-left: 1em;
  text-align: center;
  display: flex;
  align-items: center;
}
.form-title {
  margin-top: 0;
  margin-bottom: 30px;
  padding-bottom: 15px;
  position: relative;
}
.form-title::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 80px;
  height: 4px;
  background: orange;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -otransform: translateX(-50%);
  transform: translateX(-50%);
}

<div class="main">
  <div id="wrapper" class="steps">
    <div class="bt_wrap" name="1">
      <div class="box">
        <i class="icon fa fa-clipboard">
          <span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
        </i>
        <i class="icon2 fa fa-clipboard">
          <span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
        </i>
      </div>
    </div>
    <div class="bt_wrap" name="2">
      <div class="box">
        <i class="icon fa fa-building">
          <span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
        </i>
        <i class="icon2 fa fa-building">
          <span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
        </i>
      </div>
    </div>
    <div class="bt_wrap" name="3">
      <div class="box">
        <i class="icon fa fa-users">
          <span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
        </i>
        <i class="icon2 fa fa-users">
          <span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
        </i>
      </div>
    </div>
    <div class="bt_wrap" name="4">
      <div class="box">
        <i class="icon fa fa-university">
          <span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
        </i>
        <i class="icon2 fa fa-university">
          <span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
        </i>
      </div>
    </div>
    <div class="bt_wrap" name="5">
      <div class="box">
        <i class="icon fa fa-file-pdf-o"></i>
        <i class="icon2 fa fa-file-pdf-o"></i>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="form-container">
      <h2 class="form-title">Welcome to Your Employment Guide!</h2>
      <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
      <div class="text-center">
        <input type="button" value="NEXT" class="btn btn-primary next">
      </div>
    </div>
  </div>
</div>

回答 1 件
  • 私の見解は次のとおりです。

    http://jsfiddle.net/bxmaqtd3/

    左側のボタンをクリックすると、コンテンツを変更するために右側のdivが必要になります。

    私のソリューションでは、jquery show()およびhide()を使用して、スライドコンテンツを含むdivを表示および非表示にします。 html内のすべてのコンテンツを一意のID( #slide1 など)で含める必要があります 、 #slide2#slide3 など)、CSS display: none を使用します  最初の(またはデフォルトの)スライドを除くすべてのスライド。

    このソリューションでは、カスタムデータ属性を使用して、指定したボタンに表示するスライドdivのIDを保存します。例えば:

    <div class="bt_wrap" name="1" data-slide="slide1">
    
    

    左側のボタンがアクティブになっているとき、スタイリングをホバーしたときの外観のままにしておきます。

    これを達成するために、 :hover を複製します   active という新しいクラスにスタイルを設定します  ボタンdivの1つをクリックすると、すべてのボタンからクラスが削除され、クリックしたばかりのボタンにクラスが追加されます。

    JS:

    $('.bt_wrap').click(function(){
        $('.bt_wrap').removeClass('active'); //remove active class on all buttons
        $(this).addClass('active'); //add active class to the one that you clicked 
      var slideId = $(this).attr('data-slide'); //find the value of the associated slide id 
      $('.slide').not("#" + slideId).hide(); //hid all slides except the one you want to show
      $("#" + slideId).show(); //show the one you want to show
    });
    
    

    CSS:

    #slide1 {
      display: block;
    }
    #slide2 {
      display: none;
    }
    .active .box {
       transform: rotateY(-90deg);
    }
    .active {
        background: blue;
    }
    
    

    HTML:

    <head>
      <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    </head>
    <div class="main">
      <div id="wrapper" class="steps">
        <div class="bt_wrap" name="1" data-slide="slide1">
          <div class="box">
            <i class="icon fa fa-clipboard">
              <span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
            </i>
            <i class="icon2 fa fa-clipboard">
              <span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
            </i>
          </div>
        </div>
        <div class="bt_wrap" name="2" data-slide="slide2">
          <div class="box">
            <i class="icon fa fa-building">
              <span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
            </i>
            <i class="icon2 fa fa-building">
              <span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
            </i>
          </div>
        </div>
        <div class="bt_wrap" name="3">
          <div class="box">
            <i class="icon fa fa-users">
              <span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
            </i>
            <i class="icon2 fa fa-users">
              <span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
            </i>
          </div>
        </div>
        <div class="bt_wrap" name="4">
          <div class="box">
            <i class="icon fa fa-university">
              <span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
            </i>
            <i class="icon2 fa fa-university">
              <span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
            </i>
          </div>
        </div>
        <div class="bt_wrap" name="5">
          <div class="box">
            <i class="icon fa fa-file-pdf-o"></i>
            <i class="icon2 fa fa-file-pdf-o"></i>
          </div>
        </div>
      </div>
      <div class="content">
        <div id="slide1" class="slide form-container">
          <h2 class="form-title">Welcome to Your Employment Guide!</h2>
          <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
          <div class="text-center">
            <input type="button" value="NEXT" class="btn btn-primary next">
          </div>
        </div>
        <div id="slide2" class="slide form-container">
          <h2 class="form-title">Some other title</h2>
          <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h4>
          <div class="text-center">
            <input type="button" value="NEXT" class="btn btn-primary next">
          </div>
        </div>
      </div>
    </div>
    
    

あなたの答え