Question

我连续有五个缩略图，每个图像下方是一个标题，整行下面约有100个字的描述文字。我打算做的是设置缩略图作为单选按钮，将行下方的描述文本块更改为与该图像相关的内容。

到目前为止，我已将缩略图设置为：

    <div id="thumbcontainer" style="left: 60px;">
      <img class="thumb"src="image1.jpg" >Title1
    </div> 
    <div id="thumbcontainer" style="left: 160px;">
       <img class="thumb"src="image2.jpg" >Title2
    </div>
    etc.

    <p class=”descrcontainer”>Description text of 100 words</p>

我正在处理以前有关如何将图像用作单选按钮的问题中的信息，但是在单击单选按钮时，我找不到有关如何更改文本块的任何信息。有人能帮助我吗？

Answer 1

错误

#id必须是唯一的，有2 id="thumbcontainer"
每个class=”descrcontainer”都是语法错误。智能引用”在代码中不起作用，请使用双引号"

解决方案

在每个<input id='rad*' class='rad' name='rad' type='radio' style='display:none'>

<p>

将display:none添加到每个<p>
将<div class="thumbcontainer">变为<label for='chx*'>
添加CSS等。
在CSS中使用label:focus并为每个tabindex='1'添加<label>以突出显示按钮。

释

<label> for属性#id，其值为<input type='radio'>表单控件（例如<label for='rad0'>）已链接。如果您点击<input id='rad0' type='radio'>，也会点击<input type='radio'> - 就像远程按钮一样。

共享相同name属性的所有.rad:checked + .descrcontainer {display:block;}将切换为彼此同步。行为基本上只能检查一个无线电。

处于检查状态的广播可以影响其后面的兄弟元素和作为其后代的元素的样式。在这个演示中：

.rad

选中.descrcontainer类的任何元素都会显示.descrcontainer { display: none } .rad:checked+.descrcontainer { display: block; } label:focus { outline: 5px ridge cyan; box-shadow: 2px 4px 6px 8px rgba(0, 128, 200, 0.4); }类的下一个元素。

演示

<label for='rad0' class="thumbcontainer" style="display:inline-block;" tabindex='1'>
      <img class="thumb"src="https://static-s.aa-cdn.net/img/ios/1112633650/92503d478bfa0e96f28a3fefe2edf5f1?v=1" width='128'><div style='text-align:center'>Dinosaurs</div>
    </label>
<label for='rad1' class="thumbcontainer" style="display:inline-block;" tabindex='1'>
       <img class="thumb"src="https://cdn-img.fimfiction.net/user/pcrx-1431833332-196431-256" width='128'><div style='text-align:center'>Demons</div>
    </label>

<input id='rad0' type='radio' class='rad' name='rad' style='display:none'>
<p class="descrcontainer">Angulomastacator blikanasaurus colepiocephale didanodon leshansaurus niobrarasaurus nuoersaurus ovoraptor owenodon parksosaurus plateosauravus silvisaurus titanosaurus xenotarsosaurus yaleosaurus yamaceratops yunxiansaurus. Campylodon clepsysaurus elrhazosaurus
  giraffatitan heterosaurus iguanodon magnirostris piatnitzkysaurus shanag shidaisaurus tochisaurus veterupristisaurus yimenosaurus. Airakoraptor astrodon balochisaurus brontosaurus ceratonykus elaphrosaurus fabrosaurus hadrosauravus hallopus indosuchus
  khateranisaurus moshisaurus nanotyrannosaurus neovenator peltosaurus puertasaurus rebbachisaurus suchosaurus tianyuraptor umarsaurus unquillosaurus wannanosaurus xixiposaurus.</p>

<input id='rad1' type='radio' class='rad' name='rad' style='display:none'>
<p class="descrcontainer">Adramelech andromalius azazel bali raj behemoth bhuta corson dagon eurynomos foras forneus gaki malthus mastema mephistopheles moloch ninurta onoskelis oray ose samael surgat tannin ziminiar. Agares aka manah azazel barbas davy jones drekavac eligos malthus
  incubus kokb'ael labal mammon marchosias naberius paimon surgat vapula. Ahriman alal azaz'el baal bael boruta cimeies crocell eblis familiars forcas jikininki labasu morax ad-dajjal medusa naberus serguthy shax shedim. Haborym alastor allocer allu ammut
  andhaka asag asb'el azaz'el azi dahaka bael balam davy jones gamigin imp ipos ipes jikininki kabhanda medusa naphula orcus paimonia serguthy vephar vine.</p>

x === y

单击单选按钮更改文本

1 个答案:

错误

解决方案

释

演示