Question

我有几个即将发布的帖子，其中我翻译了同一首诗的多个版本。我想给两个按钮来揭示每个按钮。我想把它作为一个双重扰流器来实现，但这意味着这首诗也可以被完全隐藏（两个破坏者关闭）或在两个版本中同时显示（两个剧透开放），而我想有一个版本和一个仅始终显示。像Edcel电子表格这样的东西，你可以在底部按钮切换工作表但不能同时查看多个工作表或不查看任何工作表。可以用HTML完成吗？如果是这样，怎么样？

更新

现已删除的答案建议使用Bootstrap Panels。我试过了，但是下面的代码：

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">Vulgate version</div>
    <div class="panel-body">pefanthi</div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">Campbell version</div>
    <div class="panel-body">Abanthi</div>
  </div>
</div>
This is merely a test post to try out "Boostrap Panels". It is not meant to make any sense, but only to be able to click on buttons, which previews do not (or at least, spoilers and links don't work in previews, which is why I'm posting this).

产生这个：

这是预期的输出，在这种情况下，这不是我之后的，或者代码是否有问题？

我想不出一个实现了这种事情的网站。我想要实现的是在页面的某个位置有一排（在这种情况下是两个）按钮（在这个测试帖中，该点将是顶部，在实际博客文章中它将是在简短的介绍之后，这是只有<div style="text-align: justify">和一对<br> s），当点击它们时，它们会更改它们下面的页面的一部分，或者，如果我单击已经存在的页面，则不会更改它。特别是，在上面的代码中，我想要两个按钮，使用＆＃34; Vulgate版本＆＃34;在最左边的一个和＆＃34; Cambpell版本＆＃34;另一方面，前者自动激活并显示＆＃34; pefanthi＆＃34;，而后者可以通过点击激活，这意味着＆＃34; pefanthi＆＃34;消失，取而代之的是＃34; Abanthi＆＃34;，然后如果我点击＆＃34; Vulgate版本＆＃34;我再次得到pefanthi和Abanthi离开。就像Firefox中的浏览器的单个窗口中的标签一样：

所以在这个比较中，我想要一个＆＃34; Vulgate版本＆＃34;标签显示＆＃34; pefanthi＆＃34;和坎贝尔版本＆＃34;这显示了＆＃34; Abanthi＆＃34;，而关于那个测试帖的文字保持在显示的任何内容之下，就像那样＆＃34;看起来你有一段时间没有启动Firefox [...] ＆＃34;图片中的文字，但没有X使其消失。

更新2

想出了一种方法来几乎我想要的东西。这是：

<button title="Vulgate version" type="button" onclick="if(document.getElementById('Vspoiler') .style.display=='none') {document.getElementById('Vspoiler') .style.display=''; document.getElementById('spoiler') .style.display='none'}">Vulgate version</button>
<button title="Campbell version" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''; document.getElementById('Vspoiler') .style.display='none'}">Campbell version</button>
<div id="Vspoiler" style="display:">pefanthi</div>
<div id="spoiler" style="display:none">Abanthi</div>

这样，如果我点击按钮并显示其内容，则不会发生任何事情，而如果未显示其内容，则会显示该内容，并隐藏其他按钮的内容。 Vulgate版本按钮默认显示其内容，因此现在无法显示多于或少于一个按钮的内容。

这有两个问题：

如果破坏者超过两个 - 而我计划使用它的其中一个帖子将有3到5个 - 代码变得相当复杂，所以我想知道是否有是一种让按钮隐藏其他按钮的方法。单击内容时无需为每个其他按钮放置display:none：按钮可以与对方交谈＆＃34; Firefox标签的方式？
看起来什么也不做的按钮不是好看的IMO，所以有没有办法让按钮在按下时改变外观？例如，将其颜色更改为背景颜色，使其几乎不可见？

更新3

刚刚找到了如何更改按钮的颜色：

style="background-color:<insert color>"

。在this page实现，这是上述代码的呈现版本。现在还有一个问题：如何让每个按钮改变另一个按钮的颜色以及它自己的颜色？

更新4

This正是我想要的。除了我尝试根据我的需要调整代码：

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#vulg">Vulgate version</a></li>
  <li><a data-toggle="tab" href="#C">Campbell version</a></li>
</ul>

<div class="tab-content">
  <div id="vulg" class="tab-pane fade in active">
    <p>pefanthi.</p>
  </div>
  <div id="C" class="tab-pane fade">
    <p>Abanthi.</p>
  </div>
</div>

，结果是this，这是不对的。我做错了什么？

更新5

只是尝试复制粘贴整个部分over here，结果可以看到here，而不是页面应该是什么，页面也被错误引导或存在问题HTML版本，使代码在该页面上工作，但不在我的Blogger博客上？

更新6

关注@ crapier＆＃39;评论，我看了＆＃34; BS开始＆＃34; （这是一个不幸的初始主义:)），并找到了代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

我将它添加到我的页面，发生了一些事情。标签出现了，但它们不起作用。到底是怎么回事？我应该添加另一个代码行here吗？

更新7

显然只有添加了所有三行here才有效，但为什么呢？

更新8

将此事移至here，因此这个问题值得关闭。

＆＃34;多选扰流器＆＃34; HTML

0 个答案: