Question

我的页面侧面有这些按钮，主要内容区域占据了页面的更好部分。

我要做的是获取我单击的按钮将主要内容更改为包含相应信息的div。这很难找到，也许是因为我正在用错误的术语进行搜索，而且我已经覆盖了很大一部分stackoverflow而没有太多运气。

我有关于绝对定位div并使用脚本将div的z-index更改为使用＆＃34; = + 1＆＃34;类型的情况，但我可以看到变得混乱。

我考虑过调整一个替换部分图像文件名的脚本，以便将页面上的主图片更改为与拇指名称对应的图像的更大版本，尽管此脚本以文件名为目标，因此它并不顺利。

我也尝试了以下几点：

＆＃34;按钮的ID＆＃34; onclick function =＆＃34;主要内容类＆＃34;将ID更改为＆＃34;相应的div＆＃34;

仅在javascript谈话中，并且这根本不起作用所以我只能假设我要么看错了，要么在代码中搞砸了。

$('#tabhead1').click(function() {
  document.getElementByClassName("maintab").id = "tabs1";
});

这让我发疯，我真的很感激一些想法。我试图让它自由形成，这样任何人都无法解决任何问题。

****为了澄清，我在＃tabhead1，＃tabhead2，＃tabhead3等处有5个div ID，并且5个内容div被归类为.maintab，而id＆＃39; d作为tabs1， tabs2，tabs3等我需要第一个内容div自动显示，并根据点击的按钮更改该div。目前所有内容div都设置为display：none;除了第一个。

Answer 1

对于每个按钮，添加与相应data

<div>

例如

<button id="tabhead1" data-content="tabs1" >first Tab</button>

为标签应用公共类，例如.tab

然后你可以做以下

$('button').click(function(){
 var contentId = $(this).data('content'); // get the id of corresponding tab
 $('.tab').hide(); // hide all tabs
 $('#'+contentId).show(); //show the corresponding tab
});

Answer 2

您正在使用不存在的getElementbyClassName。使用：

document.getElementsByClassName("maintab")[0].id = "tabs1"; 
// Get all elements to match classname + get first element from array

其余的，我不知道你为什么要用JS添加id？为什么不将它们添加到HTML？

Answer 3

试试这个

$('#tabhead1').click(function() {
   // get element with class 'maintab' and replace its content with that of another tab
  $(".maintab").html($(".tabs1").html());
});

Answer 4

稍微扩展我在前面评论中发布的 demo ：

这使用了一种非常类似于@ tilwin-joy的方法，所以我想我们的想法很像。我要指出的是一些小的差异：

<强> jQuery的：

$('button').on('click', function () {
    var button = $(this);
    var target = button.data('target');
    button.prop('disabled', true).siblings().prop('disabled', false);
    $(target).show('slow').siblings().hide();
});

这使用兄弟姐妹来隐藏其他内容（少了一遍DOM）。
我建议只使用标记中的id哈希值设置数据值，我认为在脚本和标记中读取和跟踪（恕我直言）会更清楚。
此脚本还设置单击时禁用的当前按钮。这样做的好处是，您可以使用disabled属性来设置按钮的样式，即使您没有设置样式，它也会为用户提供关于当前显示哪个选项卡内容的视觉提示。查看 demo ，了解如何将其用于样式设置。

HTML：（我从您描述的标记中删除了一些不需要的ID。）

<div class="tabhead">
    <button data-target="#tabs1" disabled="true">Content 1</button>
    <button data-target="#tabs2">Content 2</button>
    <button data-target="#tabs3">Content 3</button>
    <button data-target="#tabs4">Content 4</button>
    <button data-target="#tabs5">Content 5</button>
</div>
<div class="maintab">
    <div id="tabs1">
        <img src="http://placehold.it/350/e8117f/fff&text=Image+1" alt="Image 1" />
        <p>This is the content of tabs1.</p>
    </div>
    <div id="tabs2">
        <img src="http://placehold.it/350/9acd32/fff&text=Image+2" alt="Image 2" />
        <p>This is the content of tabs2.</p>        
    </div>
    <div id="tabs3">
        <img src="http://placehold.it/350/9400d3/fff&text=Image+3" alt="Image 3" />
        <p>This is the content of tabs3.</p>        
    </div>
    <div id="tabs4">
        <img src="http://placehold.it/350/ffd700/fff&text=Image+4" alt="Image 4" />
        <p>This is the content of tabs4.</p>
    </div>
    <div id="tabs5">
        <img src="http://placehold.it/350/1e90ff/fff&text=Image+5" alt="Image 5" />
        <p>This is the content of tabs5.</p>
    </div>    
</div>

CSS：不需要 - 只是为了让您了解如何将元素设置为类似标签的样式。

/*This sets all but the first tab to hidden when the page is loaded*/
.maintab>div:not(:first-child) {
    display: none;
}


/*The rest is just to style the elements to look like tabs*/
body {
    background-color: #eaeaea;
}
.maintab, .tabhead {
    text-align: center;
    margin:0 20px;
    font-family: sans-serif;
}
.maintab {
    border: 1px solid #1e90ff;
    border-top: none;
    padding-top: 20px;
    background-color: #fff;
}
.tabhead {
    border-bottom: 1px solid #1e90ff;
    position: relative;
    margin-top: 20px;
}
button {
    background-color: #ccc;
    padding: 10px;
    border: 1px solid #999;
    border-bottom: none;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    top: 2px;
}
button:disabled {
    background-color: #fff;
    border-color: #1e90ff;
    color: #1e90ff;
    top: 3px;
    padding-top: 11px;
    cursor: not-allowed;
    z-index: 10;
}

我需要这些按钮来控制哪个div正在显示或者＃34;在顶部＆＃34;

4 个答案: