主页 / user-29692231

FrustratedBall's questions

Martin Hope
FrustratedBall
Asked: 2025-02-18 18:43:54 +0800 CST
  • 5

我知道如何使用 Tiddlywiki 上的 tabs 宏，但在某些情况下，我不希望整个 tiddler 专门用于几行。

我不擅长编码，所以我主要通过谷歌搜索找到不同的 CSS 标签示例。我最成功的一个（如下）是我在这个网站上偶然发现的。

任何帮助都将不胜感激。谢谢。

HTML 部分。

<div class="tabs">
  <input type="radio" id="tab1" name="tabs" checked>
  <input type="radio" id="tab2" name="tabs">
  <input type="radio" id="tab3" name="tabs">
 
  <div class="tab-labels">
    <label for="tab1">Tab 1</label>
    <label for="tab2">Tab 2</label>
    <label for="tab3">Tab 3</label>
  </div>
  
  <div id="content1" class="tab-content">
    <h2>Tab 1</h2>
    <p>This is the content for Tab 1.</p>
  </div>
  
  <div id="content2" class="tab-content">
    <h2>Tab 2</h2>
    <p>This is the content for Tab 2.</p>
  </div>
  
  <div id="content3" class="tab-content">
    <h2>Tab 3</h2>
    <p>This is the content for Tab 3.</p>
  </div>
</div>

还有 CSS 部分。

.tabs {
  display: block;
  flex-direction: column;
  padding-right: 1em;
}
 
.tabs .tab-labels {
  display: flex;
  gap: 3px;
}
 
.tabs input[type="radio"] {
 display: none;
}
 
.tabs label {
  font-size: 15px;
  padding: 0.25em;
  background: #353235;
  border-left: 10px;
  cursor: pointer;
}

.tabs input[type="radio"]:checked + label {
  background-color: #4a4a4a; 
  border-bottom: 2px solid blue;
}
 
.tab-content {
  padding-left: 1em;
  border: 5px solid gray;
  display: none;
  background: #353935;
}
 
/* Show tab content when corresponding radio button is checked */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

我发现/查找的所有内容都表明与以下内容相关：

input[type="radio"]:checked + .tab-label {
}

是什么让选中的标签突出显示，但我尝试过的任何方法都无法让我的代码在 Tiddlywiki 上突出显示。我尝试过使用网络上不同的 CSS 标签示例，但对我来说没有什么效果。

我的编码知识几乎为零，我在这里使用的方法可能缺少一些关键部分，但那是因为我主要关注输出。我只是找到一些编码示例，进行比较和对比，有时尝试调整一些变量以获得适度成功或预期失败。

css