【发布时间】：2018-12-07 18:38:14
【问题描述】：
我发现了一个关于按钮/美学的非常好的代码笔，并重新调整了它的用途以适应我们团队正在尝试构建的内容。基本上，我们希望按钮在左侧垂直向下，右侧有一个大 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>【问题讨论】：
-
粘贴有问题的代码 - 不是链接
-
小提琴工作：
Fiddle -
查看 SPA（单页应用程序）。查看 AJAX（没有专门的 JQuery，但 JQuery 有一个很好的实现）。剩下的就是基本的 HTML、CSS 和 JavaScript
-
当您尝试通过在小提琴链接前添加 %20 来欺骗系统时，它现在不起作用。请不要忽视 SO 的规则 - js fiddle 的链接必须附有问题本身的代码
-
你的javascript代码在哪里？
标签： javascript jquery html css