1

上下文：我正在尝试使用收音机 hack来切换在 div 中查看的文本.tabinfo，但是我的收音机和display我想要更改其属性的文本位于不同的 div 中。

问题：是否可以使用纯 CSS 选择器#text通过单击嵌套单选来选择元素？

参考代码：我正在使用引导布局并创建了以下 HTML 代码：

<div class="col-xs-2">
    <input id="tab1" type="radio" name="tabs">
    <label for="tab1">Foo</label>
</div>
<div class="col-xs-2">
    <input id="tab2" type="radio" name="tabs">
    <label for="tab2">Bar</label>
</div>
<div class="col-xs-2">
    <input id="tab3" type="radio" name="tabs" checked> 
    <label for="tab3">Foo Bar</label>
</div>
<div class="col-xs-12">
    <div class="tabinfo">
        <div id="text1">
        </div>
        <div id="text2">
        </div>
        <div id="text3">
        </div>
    </div>
</div>

以及以下 CSS：

label {
    border: solid;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom: none;
    border-color: rgb(211,211,205);
    border-width: 2px;
    color: rgb(12,174,175);
    background-color: rgb(247,247,247);
}

input:checked + label {
    background-color: #fff;
    color: rgb(94,94,94);
}

label:hover {
    cursor: pointer;
}

.tabinfo {
    border: solid;
    border-color: rgb(211,211,205);
    border-width: 2px;
    border-top-right-radius: 10px;
}

#tab1:checked ~ .col-xs-12 .tabinfo #text1,
#tab2:checked ~ .col-xs-12 .tabinfo #text2,
#tab3:checked ~ .col-xs-12 .tabinfo #text3 {
    display: block!important;
}

正如您可能已经猜到的那样，上述方法不起作用，因为#texts 和#tabs 位于不同的 div 中。在不破坏 Bootstrap 布局的情况下，是否有任何解决方法或解决方案？

提前致谢。

4

2 回答 2

2

可以使用一个脆弱的解决方案，但这涉及将<input>元素从元素中移开<label>，并且您指定任何 HTML 更改的一个要求是任何更改

…不会破坏 [Bootstrap] 布局。

我不认为我的更改会破坏该布局，但我不完全确定，因此您需要自己评估。

但是，除了序言之外，我已将您的 HTML 修改为以下内容：

<input id="tab1" type="radio" name="tabs" />
<input id="tab2" type="radio" name="tabs" />
<input id="tab3" type="radio" name="tabs" />
<div class="col-xs-2">
  <label for="tab1">Foo</label>
</div>
<div class="col-xs-2">
  <label for="tab2">Bar</label>
</div>
<div class="col-xs-2">
  <label for="tab3">Foo Bar</label>
</div>
<div class="col-xs-12">
  <div class="tabinfo">
    <div id="text1">
    </div>
    <div id="text2">
    </div>
    <div id="text3">
    </div>
  </div>
</div>

这种方法使我们能够利用<label>元素检查/取消选中其关联<input>元素的能力，而不管它可能位于文档中的什么位置（只要该for属性标识了id该关联元素<input>）；将<input>元素放在内容之前允许我们使用兄弟组合器来查找包含相关内容的元素以进行样式设置。

假设您希望保留<input>被选中的视觉效果，否则，我们还使用 CSS 生成的内容来模拟选中或未选中的收音机；不过，这可以使用一些微调：

/* Here we hide all <div> elements within the .tabinfo
   element, and also all <input> elements whose 'name'
   attribute is equal to 'tabs' and whose 'type' is
   equal to 'radio': */

.tabinfo div,
input[name=tabs][type=radio] {
  display: none;
}


/* This styles the generated content of the ::before
   pseudo-element to show the attribute-value of the
   element's 'id' attribute; purely for the purposes
   of this demo: */

div[id^=text]::before {
  content: attr(id);
}


/* Styling the generated content, the ::before pseudo-
   element, of the <label> elements, in order to
   emulate the moved radio <input>: */

label::before {
  /* An empty string, content is required in order for
     the pseudo-element to be visible on the page: */
  content: '';
  /* To allow the pseudo-element to have specified
     width and height values: */
  display: inline-block;
  height: 1em;
  width: 1em;
  /* To include the border, and any padding, widths
     in the calculations for the element's size: */
  box-sizing: border-box;
  background-color: #eee;
  border: 1px solid #999;

  /* In order for the pseudo-radio to have a round
     shape/border: */
  border-radius: 50%;
  margin-right: 0.2em;
}

/* This selector styles the <label> element whose 'for'
   attribute is equal to 'tab1', which is a child of
   the div.col-xs-2 element which itself is a general
   sibling of the #tab1 element when that element is
   checked; this is the 'checked' style of the pseudo-
   'radio' generated content: */
#tab1:checked~div.col-xs-2>label[for=tab1]::before {
  background-color: #666;
  box-shadow: inset 0 0 0 3px #fff;
}

/* This selects the element with an id of 'text1',
   inside of a <div> with the class of 'col-xs-12',
   which is a general sibling of the '#tab1' element
   when that element is checked: */
#tab1:checked~div.col-xs-12 #text1 {

  /* Here we make the content of that element visible: */
  display: block;
}

#tab2:checked~div.col-xs-2>label[for=tab2]::before {
  background-color: #666;
  box-shadow: inset 0 0 0 3px #fff;
}

#tab2:checked~div.col-xs-12 #text2 {
  display: block;
}

#tab3:checked~div.col-xs-2>label[for=tab3]::before {
  background-color: #666;
  box-shadow: inset 0 0 0 3px #fff;
}

#tab3:checked~div.col-xs-12 #text3 {
  display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<input id="tab1" type="radio" name="tabs" />
<input id="tab2" type="radio" name="tabs" />
<input id="tab3" type="radio" name="tabs" />
<div class="col-xs-2">
  <label for="tab1">Foo</label>
</div>
<div class="col-xs-2">
  <label for="tab2">Bar</label>
</div>
<div class="col-xs-2">
  <label for="tab3">Foo Bar</label>
</div>
<div class="col-xs-12">
  <div class="tabinfo">
    <div id="text1">
    </div>
    <div id="text2">
    </div>
    <div id="text3">
    </div>
  </div>
</div>

JS 小提琴演示。

正如您从用于显示与选中元素相关的元素的规则中看到的那样，这些规则需要一定的<input>精度和重复性，this因为data-affectedbyCSS没有这样我们就可以制定以下规则：id<input>

input[id^=tab]:checked ~ .col-xs-12 [data-affectedby=this.id]
于 2017-04-09T15:12:08.657 回答
0

当使用不同级别的 div 时，这将非常困难（也许是不可能的）。

如果您稍微扁平化 HTML 结构，您可能能够实现与您正在寻找的内容相近的东西。但请注意，这意味着摆脱大多数 Bootstrap 辅助布局 div。

示例 HTML：

<input id="tab1" type="radio" name="tabs">
<label for="tab1">Foo</label>

<input id="tab2" type="radio" name="tabs">
<label for="tab2">Bar</label>

<input id="tab3" type="radio" name="tabs" checked> 
<label for="tab3">Foo Bar</label>

<div id="text1" class="tabinfo">text1</div>
<div id="text2" class="tabinfo">text2</div>
<div id="text3" class="tabinfo">text3</div>

示例 CSS：

label {
  border: solid;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom: none;
  border-color: rgb(211,211,205);
  border-width: 2px;
  color: rgb(12,174,175);
  background-color: rgb(247,247,247);
}
input:checked + label {
  background-color: #fff;
  color: rgb(94,94,94);
}
label:hover {
  cursor: pointer;
}
.tabinfo {
  display:none;
}
#tab1:checked ~ #text1{
  display:block;
}
#tab2:checked ~ #text2{
  display:block;
}
#tab3:checked ~ #text3{
  display:block;
}

请参阅我在这里制作的示例：https ://plnkr.co/edit/DyID8me4bM7VPCI9l6Cg?p=preview

于 2017-04-09T14:32:23.710 回答