Bootstrap 我可以用CSS影响当前div之外的元素吗?

egdjgwm8  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(157)

内容:我尝试使用radio hack来切换在.tabinfo div中查看的文本,但是我的radio和要更改其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;
}

正如您可能已经猜到的,由于#text#tab位于不同的div中,因此上述方法不起作用。有没有在不破坏引导布局的情况下的变通方法或解决方案?

zc0qhyus

zc0qhyus1#

可以使用脆弱的解决方案,但这涉及到将<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属性标识该关联的<input>id);将<input>元素放置在内容之前允许我们使用兄弟组合符来找到包含要样式化的相关内容的元素。
假设您希望保留选中<input>的视觉效果,我们还使用CSS生成的内容来模拟选中或未选中的单选按钮;不过,这可能需要一些微调:
第一次
JS Fiddle demo
正如您可以从所形成的规则中看到的,这些规则用于显示与选中的<input>元素相关的元素,这些规则需要一定的精度和重复性,因为CSS没有this的概念,因此,给定一个data-affectedby属性,其值可能被设置为相关<input>id,我们不可能有这样的规则:

input[id^=tab]:checked ~ .col-xs-12 [data-affectedby=this.id]
nzk0hqpo

nzk0hqpo2#

当在不同级别上与div一起工作时,这将是非常困难的(也许是不可能的)。
如果你把HTML结构扁平化一点,你可能会得到一些接近你所寻找的东西。注意,这意味着摆脱了大多数引导助手布局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

相关问题