如何在三个div之间切换？可能使用 jquery 解决方案？

Question

我正在尝试在页面中创建一个部分，您可以在不同的部分之间切换。我是 jquery / javascript 的新手... =(

当我切换三个不同的部分时，我希望颜色 div 的位置保持不变。

更好地解释：

点击订阅(id="subScription") --> 会出现红框(id="firstBlock") ////

单击当前问题(id="inStore") --> 会出现蓝色框 (id="secondBlock") ////

点击 Digital Edition("onLine") --> 会出现绿色框 (id=thirdBlock") ////

这是我的代码片段：

.line {
    background: none repeat scroll 0 0 #E5E5E5;
    height: 1px;
    position: relative;
    top:10px;
    z-index: 0;
    margin: 0 80px;
}

.midSection .sectionHeader {
    width: 230px;
    margin-bottom: 18px;
}

.sectionHeader{
    background: none repeat scroll 0 0 #ffffff;
    font-size: 20px;
    line-height: 21px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.menuLine{
    position: relative;
    text-align: center;
    margin-bottom: 10px;
}

.menuLine div{
    position: relative;
    margin: 10px 0;
}

.menuLine .menu{
    font-family: GillSans,"Gill Sans MT",Calibri,sans-serif;
    padding-left: 20px;
    padding-right: 20px;
    text-transform: uppercase;
    border-right-style: solid;
    border-width: thin;
    border-color: #E5E5E5;
    margin-right: -3px;
    font-size: 13px;
}

.menu {
    display: inline-block;
    zoom: 1;
    vertical-align: top;
    height: 15px;
}

.menuLine .menu#onLine {
    border: none;
}

.middleBlock {
    
    height: 100px;
    padding: 30px 100px;
    background: red;
}

<div class="midSection sections">
  <div class="line"></div>
  <div class="sectionHeader">How to purchase</div>
  <div class="menuLine">
    <div id="subScription" class="menu" style="color:grey;">Subscription</div>
    <div id="inStore" class="menu" style="color: black;">current Issues</div>
    <div id="onLine" class="menu" style="color: black;">Digital Edition</div>
  </div>
  <div id="firstBlock" class="middleBlock">
    <div class="firstBlockContent leftblock">
      <h3>"subscribe"<br>"to blah" </h3>
    </div>

  </div>
  <div id="secondBlock" class="middleBlock" style="background:blue;">
    <div class="secondBlockContent leftblock">
      <h3>"subscribe"<br>"to blah"</h3>
    </div>

  </div>
  <div id="thirdBlock" class="middleBlock" style="background:lightgreen;">
    <div class="secondBlockContent leftblock">
      <h3>"subscribe"<br>"to blah"</h3>
    </div>

  </div>


</div>

Answer 1

使用display()切换类的函数（在我的情况下）。

就像是：

var display = function(block_name, title) { // 'block_name gives block id' and 'title gives title object'
  // Toggle Block
  $('.middleBlock').css('display', 'none'); // make all blocks 'display: none'
  $('#' + block_name + '').css('display', 'block'); // make the block (in arguments) 'display: block'

  // Change Title Color
  $('.menu').removeClass('active'); // remove 'active' class from all titles
  $(title).addClass('active'); // add 'active' class to specific title
}

看看下面的片段：

var display = function(block_name, title) { // 'block_name gives block id' and 'title gives title object'
  // Toggle Block
  $('.middleBlock').css('display', 'none'); // make all blocks 'display: none'
  $('#' + block_name + '').css('display', 'block'); // make the block (in arguments) 'display: block'

  // Change Title Color
  $('.menu').removeClass('active'); // remove 'active' class from all titles
  $(title).addClass('active'); // add 'active' class to specific title
}

var display = function(block_name, title) {
  // Toogle Block
  $('.middleBlock').css('display', 'none');
  $('#' + block_name + '').css('display', 'block');

  // Change Title Color
  $('.menu').removeClass('active');
  $(title).addClass('active');
}

$('#subScription').on('click', function() {
  display('firstBlock', $(this));
});

$('#inStore').on('click', function() {
  display('secondBlock', $(this));
});

$('#onLine').on('click', function() {
  display('thirdBlock', $(this));
});

.line {
  background: none repeat scroll 0 0 #E5E5E5;
  height: 1px;
  position: relative;
  top: 10px;
  z-index: 0;
  margin: 0 80px;
}
.midSection .sectionHeader {
  width: 230px;
  margin-bottom: 18px;
}
.sectionHeader {
  background: none repeat scroll 0 0 #ffffff;
  font-size: 20px;
  line-height: 21px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}
.menuLine {
  position: relative;
  text-align: center;
  margin-bottom: 10px;
}
.menuLine div {
  position: relative;
  margin: 10px 0;
}
.menuLine .menu {
  font-family: GillSans, "Gill Sans MT", Calibri, sans-serif;
  padding-left: 20px;
  padding-right: 20px;
  text-transform: uppercase;
  border-right-style: solid;
  border-width: thin;
  border-color: #E5E5E5;
  margin-right: -3px;
  font-size: 13px;
}
.menu {
  display: inline-block;
  zoom: 1;
  vertical-align: top;
  height: 15px;
  cursor: pointer;
}
.menuLine .menu#onLine {
  border: none;
}
.middleBlock {
  display: none;
  height: 100px;
  padding: 30px 100px;
  background: red;
}
#firstBlock {
  display: block;
}
.menu.active {
  color: #999;
}

希望这可以帮助！