使用 jQuery 交换 div 内容

Question

我找到了一个关于按钮/美学的非常甜蜜的代码笔，并重新利用它以适应我们团队试图构建的内容。 基本上，我们希望按钮在左侧垂直向下，在右侧有一个大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>

Answer 1

这是我的看法：

http://jsfiddle.net/bxmaqtd3/

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

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

此解决方案使用自定义数据属性来存储您希望给定按钮显示的幻灯片div 的 ID。例如：

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

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

为了实现这一点，我将:hover样式复制到一个名为active的新类中，当您单击其中一个按钮div 时，它会从所有按钮中删除该类，然后将该类添加到您刚刚单击的按钮中。

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