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

我正在尝试在页面中创建一个分区，您可以在不同的分区之间切换。我不熟悉jquery/javascript=(

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

为了更好地解释：

单击subscription（id=“subscription”）-->将出现红色框（id=“firstBlock”）////

单击当前问题（id=“inStore”）-->将出现蓝色框（id=“secondBlock”）////

单击数字版（“在线”）-->将出现绿色框（id=thirdBlock）////

以下是我的代码片段：

.line{
背景：无重复滚动0 0#e5；
高度：1px；
位置：相对位置；
顶部：10px；
z指数：0；
利润率：0.80px；
}
.中段.节头{
宽度：230px；
边缘底部：18px；
}
.节头{
背景：无重复滚动0 0#ffffff；
字体大小：20px；
线高：21px；
保证金：0自动；
位置：相对位置；
文本对齐：居中；
文本转换：大写；
}
梅努林先生{
位置：相对位置；
文本对齐：居中；
边缘底部：10px；
}
梅努林分区{
位置：相对位置；
利润率：10px0；
}
.menuLine.菜单{
字体系列：GillSans，“Gill Sans MT”，Calibri，无衬线；
左侧填充：20px；
右边填充：20px；
文本转换：大写；
右边框样式：实心；
边界宽度：薄；
边框颜色：#E5；
右边距：-3px；
字体大小：13px；
}
.菜单{
显示：内联块；
缩放：1；
垂直对齐：顶部；
高度：15px；
}
.menuLine.menu#在线{
边界：无；
}
中段{
高度：100px；
填充：30px 100px；
背景：红色；
}

如何购买
订阅
当前问题
数码版
“订阅”
“到blah”
“订阅”
“到blah”
“订阅”
“到blah”

下面是一个非常简单易懂的示例

您想要的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。

下面是一个非常简单易懂的示例

您想要的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。

使用一个函数（在我的例子中是

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=函数（块名称、标题）{
//图格块
$（'.middleBlock'）.css（'display'，'none'）；
$（'#'+block_name+''）.css（'display'，'block'）；
//更改标题颜色
$（'.menu'）.removeClass（'active'）；
$（标题）.addClass（“活动”）；
}
$（“#订阅”）。在（'click'，function（）上{
显示（'firstBlock'，$（this））；
});
$（'#inStore'）。在（'click'，function（）上{
显示（'secondBlock'，$（this））；
});
$（'#onLine'）。在（'click'，function（）上{
显示（'thirdBlock'，$（this））；
})；

.line{
背景：无重复滚动0 0#e5；
高度：1px；
位置：相对位置；
顶部：10px；
z指数：0；
利润率：0.80px；
}
.中段.节头{
宽度：230px；
边缘底部：18px；
}
.节头{
背景：无重复滚动0 0#ffffff；
字体大小：20px；
线高：21px；
保证金：0自动；
位置：相对位置；
文本对齐：居中；
文本转换：大写；
}
梅努林先生{
位置：相对位置；
文本对齐：居中；
边缘底部：10px；
}
梅努林分区{
位置：相对位置；
利润率：10px0；
}
.menuLine.菜单{
字体系列：GillSans，“Gill Sans MT”，Calibri，无衬线；
左侧填充：20px；
右边填充：20px；
文本转换：大写；
右边框样式：实心；
边界宽度：薄；
边框颜色：#E5；
右边距：-3px；
字体大小：13px；
}
.菜单{
显示：内联块；
缩放：1；
垂直对齐：顶部；
高度：15px；
光标：指针；
}
.menuLine.menu#在线{
边界：无；
}
中段{
显示：无；
高度：100px；
填充：30px 100px；
背景：红色；
}
#第一街区{
显示：块；
}
.menu.active{
颜色：#999；
}

如何购买
订阅
当前问题
数码版
“订阅”
“到blah”
“订阅”
“到blah”
“订阅”
“到blah”

使用一个函数（在我的例子中是

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=函数（块名称、标题）{
//图格块
$（'.middleBlock'）.css（'display'，'none'）；
$（'#'+block_name+''）.css（'display'，'block'）；
//更改标题颜色
$（'.menu'）.removeClass（'active'）；
$（标题）.addClass（“活动”）；
}
$（“#订阅”）。在（'click'，function（）上{
显示（'firstBlock'，$（this））；
});
$（'#inStore'）。在（'click'，function（）上{
显示（'secondBlock'，$（this））；
});
$（'#onLine'）。在（'click'，function（）上{
显示（'thirdBlock'，$（this））；
})；

.line{
背景：无重复滚动0 0#e5；
高度：1px；
位置：相对位置；
顶部：10px；
z指数：0；
利润率：0.80px；
}
.中段.节头{
宽度：230px；
边缘底部：18px；
}
.节头{
背景：无重复滚动0 0#ffffff；
字体大小：20px；
线高：21px；
保证金：0自动；
位置：相对位置；
文本对齐：居中；
文本转换：大写；
}
梅努林先生{
位置：相对位置；
文本对齐：居中；
边缘底部：10px；
}
梅努林分区{
位置：相对位置；
利润率：10px0；
}
.menuLine.菜单{
字体系列：GillSans，“Gill Sans MT”，Calibri，无衬线；
左侧填充：20px；
右边填充：20px；
文本转换：大写；
右边框样式：实心；
边界宽度：薄；
边框颜色：#E5；
右边距：-3px；
字体大小：13px；
}
.菜单{
显示：内联块；
缩放：1；
垂直对齐：顶部；
高度：15px；
光标：指针；
}
.menuLine.menu#在线{
边界：无；
}
中段{
disp
.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;
}