Question

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

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

更好地解释：

点击订阅（id =＆＃34; subScription＆＃34;） - ＆gt;红色框（id =＆＃34; firstBlock＆＃34;）会出现////

点击当前问题（id =＆＃34; inStore＆＃34;） - ＆gt;蓝框（id =＆＃34; secondBlock＆＃34;）会出现////

点击Digital Edition（＆＃34; onLine＆＃34;） - ＆gt;绿框（id = thirdBlock＆＃34;）会出现////

这是我的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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
}

请看下面的代码段：

＆＃13;

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));
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="midSection sections">
  <div class="line"></div>
  <div class="sectionHeader">How to purchase</div>
  <div class="menuLine">
    <div id="subScription" class="menu active">Subscription</div>
    <div id="inStore" class="menu">current Issues</div>
    <div id="onLine" class="menu">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>

＆＃13;

希望这有帮助！

Answer 2

以下是JDSFiddle

中一个非常简单易懂的示例

您想要的JavaScript看起来像这样

$(document).ready(function() {
  $('.middleBlock').hide();
});

$('#subScription').click(function() {
  $('#firstBlock').show();
  $('#secondBlock').hide();
  $('#thirdBlock').hide();
});

$('#inStore').click(function() {
  $('#firstBlock').hide();
  $('#secondBlock').show();
  $('#thirdBlock').hide();
});

$('#onLine').click(function() {
  $('#firstBlock').hide();
  $('#secondBlock').hide();
  $('#thirdBlock').show();
});

您必须在页面中包含jQuery。

Answer 3

在HTML中进行了一些更改，以使JS更紧凑。

为菜单链接添加了data-content属性，其中包含要显示的相应内容的id。以下是修改后的HTML代码段：

<div id="subScription" data-content="#firstBlock" class="menu active">Subscription</div>
<div id="inStore" data-content="#secondBlock" class="menu">current Issues</div>
<div id="onLine" data-content="#thirdBlock" class="menu">Digital Edition</div>

用于切换元素的jQuery代码：

$(".menuLine .menu").click (function(){
    $(".middleBlock").css('display', 'none');
    var contentObj = $(this).data('content');
    $(contentObj).css('display', 'block');

    // Add Active class
    $(".menuLine .menu").removeClass('active');
    $(this).addClass('active');
});

添加此CSS以更改活动链接的颜色：

.menuLine .active{color:grey;}

// Added color:black; and removed this from menu's inline style
.menu {
    display: inline-block;
    zoom: 1;
    vertical-align: top;
    height: 15px;
    color: black;
}

这是工作JS Fiddle link。

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

3 个答案: