Javascript 使用jquery交换div内容_Javascript_Jquery_Html_Css

Javascript 使用jquery交换div内容

javascript jquery html css

Javascript 使用jquery交换div内容,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我找到了一个关于按钮/感觉的非常好的代码笔，并重新设计了它，以适应我们团队正在努力构建的内容。基本上，我们希望按钮在左手边垂直向下，在右手边有一个大的div。单击左侧的某个按钮时，右侧的div将更改以显示相应的内容。在阅读了一些内容之后，jQuery似乎就是这个功能的答案。我从来没有真正编写过jQuery，也无法让任何东西正常工作。我们需要两件事：单击左侧的按钮时，我们需要右侧的div来更改内容当左侧的按钮处于活动状态时，我希望样式保持悬停时的样子有人能提供一些指导吗？谢谢 #包装器

我找到了一个关于按钮/感觉的非常好的代码笔，并重新设计了它，以适应我们团队正在努力构建的内容。基本上，我们希望按钮在左手边垂直向下，在右手边有一个大的div。单击左侧的某个按钮时，右侧的div将更改以显示相应的内容。在阅读了一些内容之后，jQuery似乎就是这个功能的答案。我从来没有真正编写过jQuery，也无法让任何东西正常工作。我们需要两件事：

单击左侧的按钮时，我们需要右侧的div来更改内容
当左侧的按钮处于活动状态时，我希望样式保持悬停时的样子

有人能提供一些指导吗？谢谢

#包装器{
文本对齐：居中；
}
.bt_包装{
显示器：flex；
弯曲方向：立柱；
宽度：自动；
高度：自动；
背景：灰色；
宽度：100px；
高度：100px；
光标：指针；
透视图：200px；
过渡：背景0.2秒放松；
}
.盒子{
位置：绝对位置；
透视原点：50px 50px；
变换原点：50px 50px；
转换：转换0.2s缓解；
变换样式：保留-3d；
}
偶像
.icon2{
位置：绝对位置；
排名：0；
左：20px；
边缘顶部：20px；
背景：黑色；
颜色：#fff；
宽度：60px；
高度：60px；
字号：2em；
线高：60px；
过渡：背景0.2秒放松；
变换：平移3d（0px，0px，30px）旋转（0deg）；
}
.icon2{
背景：黑色；
变换：平移3d（29px，0px，0px）旋转（90度）；
过渡：背景0.2秒放松；
}
.bt_wrap：悬停{
背景：蓝色；
}
.bt_wrap:hover.icon{
背景：黑色；
}
.bt_wrap:hover.icon2{
背景：黑色；
颜色：蓝色；
}
.bt_wrap:hover.box{
变换：旋转（-90度）；
}
.开始{
字体大小：0.75em；
位置：绝对位置；
底部：4px；
右：4px；
颜色：绿色；
背景：白色；
边界半径：50%；
宽度：1米；
}
梅因先生{
显示器：flex；
}
.内容{
宽度：100%；
左：1米；
文本对齐：居中；
显示器：flex；
对齐项目：居中；
}
.表格名称{
边际上限：0；
边缘底部：30px；
垫底：15px；
位置：相对位置；
}
.表格名称：：之前{
内容：“；
位置：绝对位置；
底部：0；
左：50%；
宽度：80px；
高度：4px；
背景：橙色；
-webkit转换：translateX（-50%）；
-moz变换：translateX（-50%）；
-ms转换：translateX（-50%）；
-otransform:translateX（-50%）；
转化：translateX（-50%）；
}


欢迎来到你的就业指南！
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

以下是我的看法：

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

我的解决方案使用jquery和来显示和隐藏包含幻灯片内容的div。您需要在html中包含具有唯一ID的所有内容（即

#slide1

，

#slide2

，

#slide3

，等等），并在除第一张（或默认）幻灯片外的所有幻灯片上使用css

显示：none

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

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

CSS:

HTML:


欢迎来到你的就业指南！
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
其他头衔
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。

粘贴有问题的代码-不是像linkFiddle那样工作：查看SPA（单页应用程序）。看看AJAX（没有专门的JQuery，但是JQuery有一个很好的实现）。剩下的是基本的HTML、CSS和JavaScription，因为您试图通过在fiddle链接前面添加%20来控制系统，但现在无法工作。请不要忽略js FIDLE的SO链接必须附带代码的规则，问题是它本身javascript代码在哪里？

$('.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

});

#slide1 {
  display: block;
}

#slide2 {
  display: none;
}

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

.active {
    background: blue;
}

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