使用jQuery交换div内容

时间：2018-06-28 15:46:12

标签： javascript jquery html css

我发现了一个很好的关于按钮/美学的代码笔，并重新调整了它的用途，以适应我们团队正在尝试的东西。基本上，我们希望按钮在左侧垂直下降，在右侧具有较大的div。单击左侧的某个按钮时，右侧的div将更改以显示适当的内容。阅读后，看起来jQuery是此功能的答案。我从未真正编码过jQuery，并且还无法正常工作。我们需要两件事：

  • 单击左侧的按钮时，我们需要右侧的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 个答案:

答案 0 :(得分：0)

这是我的看法：

http://jsfiddle.net/bxmaqtd3/

单击左侧的按钮时，我们需要右侧的div来更改内容。

我的解决方案使用jquery show()和hide()来显示和隐藏包含幻灯片内容的div。您需要使用唯一的ID（例如#slide1，#slide2，#slide3等在html中包含所有内容，并在所有幻灯片上使用css display: none除外）第一张（或默认）幻灯片。

此解决方案使用自定义data attribute存储希望给定按钮显示的幻灯片div的ID。例如：

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

当左侧的按钮处于活动状态时，我希望样式保持悬停时的样子。

要实现这一点，我将:hover样式复制到一个名为active的新类中，当您单击所有按钮中的一个按钮div removes the class然后单击adds the class时，将其复制到一个名为$('.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 }); 的新类中。到您刚刚单击的按钮。

JS：

#slide1 {
  display: block;
}

#slide2 {
  display: none;
}

.active .box {
   transform: rotateY(-90deg);
}

.active {
    background: blue;
}

CSS：

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

HTML：

{{1}}
相关问题
最新问题