我可以将一个事件从一个标签传播到锚链接，没有javascript？ [英] Can I propagate an event from a label to an anchor link without javascript?

问题描述

首先，我在我的菜单上使用纯css手风琴。它使用无线电输入来控制子菜单的高度。所以你点击一个标签，相关的子菜单展开，而其他缩小。

其次，我使用锚标签来隐藏或显示特定的内容。此回答总结了这一点。

底线：我有在标签标签中嵌套的锚标签，如下所示：

 < div class =tab> 
< input id =about-inputtype =radioname =menu> 
<！ - 重要部分
 ----------------------------------- ---------------  - > 
< label for =about-input> 
< h5 class =nav-item> 
< a href =＃about>关于我们< / a> 
< / h5> 
< / label> 
<！------------------------------------------- ---------  - > 
< div class =tab-content> 
< h6 class =nav-sub-item>< a href =＃> 1< / a>< / h6> 
< h6 class =nav-sub-item>< a href =＃> 2< / a>< / h6> 
< h6 class =nav-sub-item>< a href =＃> 3< / a>< / h6> 
< h6 class =nav-sub-item>< a href =＃> 4< / a>< / h6> 
< h6 class =nav-sub-item>< a href =＃> 5< / a>< / h6> 
< / div> 
< / div> 
  

如另一个答案：

在HTML5 CR中，a元素是为了这样定义的原因， ，和标签计数作为交互。

因此，我将锚标记保持在最深的位置。但是，如果我单击锚点（嵌套在标签中），则标签的属性不会触发，如果我单击标签的其余部分，我在锚点之外（锚点标签没有更新）

编辑：根据请求，我用css写了一段代码。在此版本中，链接在前2个菜单项中接管。我删除了第3和第4个菜单项中的链接，因此您可以使用：checked 查看菜单展开/

 ＃why，＃about，＃why2，＃about2 {opacity：0; display：none;}＃为什么：target，＃about：target，＃why2：target，＃about2：target {display：block; opacity：1;}。tab input：checked〜.tab-content {max-height：25em;}。 overflow：hidden; -webkit-transition：max-height .35s; -o-transition：max-height .35s; transition：max-height .35s;}。tab输入，＃menu-input {position：absolute;不透明度：0; z-index：-1;}。menu {position：absolute;宽度：30％;背景颜色：灰色top：0;左：0; bottom：0;}。content {position：absolute;左：30％; background-color：cyan; top：0; right：0; bottom：0;}。tab input {position：absolute;不透明度：0; z-index：-1;}  

 < html& < body> < div class =menu> < div class =tab expanded> < input id =about-inputtype =checkbox> < label id =about-labelfor =about-input> < a href =＃about> < h5 class =nav-item>关于我们< / h5> < / a> < / label> < div class =tab-content> < h6 class =nav-sub-item>< a href =about / purpose>目的< / a>< / h6> < h6 class =nav-sub-item>< a href =about / 1> 1< / a>< / h6> < h6 class =nav-sub-item>< a href =about / 2> 2< / a>< / h6> < h6 class =nav-sub-item>< a href =about / 3> 3< / a>< / h6> < h6 class =nav-sub-item>< a href =anout / 4> 4< / a>< / h6> < / div> < / div> < div class =tab expanded> < input id =why-inputtype =checkbox> < label id =why-labelfor =why-input> < a href =＃why> < h5 class =nav-item> WHY< / h5> < / a> < / label> < div class =tab-content> < h6 class =nav-sub-item>< a href =why / purpose>为什么？< / a>< / h6> < h6 class =nav-sub-item>< a href =why / 1> 1< / a>< / h6> < h6 class =nav-sub-item>< a href =why / 2> 2）< / a>< / h6> < h6 class =nav-sub-item>< a href =why / 3> 3< / a>< / h6> < h6 class =nav-sub-item>< a href =why / 4> 4< / a>< / h6> < / div> < / div> < div class =tab expanded> < input id =about2-inputtype =checkbox> < label id =about2-labelfor =about2-input> < h5 class =nav-item>关于US2< / h5> < / label> < div class =tab-content> < h6 class =nav-sub-item>< a href =about / purpose>目的2< / a>< / h6> < h6 class =nav-sub-item>< a href =about / 1> 1< / a>< / h6> < h6 class =nav-sub-item>< a href =about / 2> 2< / a>< / h6> < h6 class =nav-sub-item>< a href =about / 3> 3< / a>< / h6> < h6 class =nav-sub-item>< a href =anout / 4> 4< / a>< / h6> < / div> < / div> < div class =tab expanded> < input id =why2-inputtype =checkbox> < label id =why2-labelfor =why2-input> < h5 class =nav-item> WHY2< / h5> < / label> < div class =tab-content> < h6 class =nav-sub-item>< a href =why2 / purpose> why2是？< / a>< / h6> < h6 class =nav-sub-item>< a href =why2 / 1> 1< / a>< / h6> < h6 class =nav-sub-item>< a href =why2 / 2> 2）< / a>< / h6> < h6 class =nav-sub-item>< a href =why2 / 3> 3< / a>< / h6> < h6 class =nav-sub-item>< a href =why2 / 4> 4< / a>< / h6> < / div> < / div> < / div> < div class =content> < section id =about> Quod cum ita sit，paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant，vocali sonu，perflabili tinnitu fidium resultinges。 denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica，et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia。 Interhaec Orfitus praefecti potestate regebat urbem aeternam ultra< < section id =why> Modum delatae dignitatis sese efferens insolenter，vir quidem prudens et forensium negotiiorum oppido gnarus，sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus，quo administrrante seditiones sunt concitata graves ob inopiam vini：huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros。 In nunc si ad aliquem ben Nummatum tumentemque ideo honestus advena salutatum introieris，primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri，miraberis numquam antea visus summatem virgin tenuem te sic enixius observantem，ut paeniteat ob haec bona tamquam非无vidisse antern十年罗马。 < / section> < section id =about2> Quod cum ita sit，paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant，vocali sonu，perflabili tinnitu fidium resultinges。 denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica，et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia。 Interhaec Orfitus praefecti potestate regebat urbem aeternam ultra< < section id =why2> Modum delatae dignitatis sese efferens insolenter，vir quidem prudens et forensium negotiiorum oppido gnarus，sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus，quo administrrante seditiones sunt concitata graves ob inopiam vini：huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros。 In nunc si ad aliquem ben Nummatum tumentemque ideo honestus advena salutatum introieris，primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri，miraberis numquam antea visus summatem virgin tenuem te sic enixius observantem，ut paeniteat ob haec bona tamquam非无vidisse antern十年罗马。 < / section> < / div>< / body>  

方式传播事件正常？还是解决方法？

解决方案

因此，我将锚标记保持在最深的位置。但是，如果我点击锚点（嵌套在标签中），标签的属性不会触发，对标签的其余部分，我在锚点之外（和锚点标签不更新）

是否有正确传播事件的方法？或解决方法？

布局

1. < label> 与用于到 c> c> c> c> 位于< label> 之外的$ c>< section> 。


2. A < button> 链接到＃1上的< label> 。


3. < h5>

1. 点击< label> 方形黄色虚线边框）。




2. 注意< label> c $ c>< section> （ #content：target 出现）。




3. 这证明是有可能利用< label for> 和表单元素< button> code>




4. 现在重复此过程，只需点击< a>

捕获 strong>

... 阶段 ...... 阶段

I am trying to combine 2 tricks in a static website without javascript, if possible.

First, I use a pure css accordion on my menu. It uses radio inputs to control the height of the submenus. So you click on a label and the related submenu expand while others shrink.

Second, I use anchor tags to hide or display specific contents. This answer sums it up.

Bottom line: I have an anchor tag nested in a label tag, like this:

   <div class="tab">
    <input id="about-input" type="radio" name="menu">
     <!-- Important part
     –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <label for="about-input">
        <h5 class="nav-item">
             <a href="#about">ABOUT US</a>
        </h5>
    </label>
    <!--–––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <div class="tab-content">
      <h6 class="nav-sub-item"><a href="#">1</a></h6>
      <h6 class="nav-sub-item"><a href="#">2</a></h6>
      <h6 class="nav-sub-item"><a href="#">3</a></h6>
      <h6 class="nav-sub-item"><a href="#">4</a></h6>
      <h6 class="nav-sub-item"><a href="#">5</a></h6>
     </div>
   </div>

As stated in another answer:

In HTML5 CR, the a element is for such reasons defined so that no interactive descendant is allowed, and label counts as interactive.

So I keep the anchor tag in the deepest position. However, the for attribute of the label does not trigger if I click on the anchor (which is nested in the label), and if I click on the rest of the label, I am outside the anchor (and the anchor tag is not updated)

EDIT: As requested, I wrote a snippet with the css. In this version, the link takes over in the first 2 menu items.I removed the link in the 3th and 4th menu items so you can see that the menu expands/reduce using the :checked pseudo selector, but of course the section anchored wont appear (no link).

#why,
#about,
#why2,
#about2{
  opacity: 0;
  display: none;
}
#why:target,#about:target,#why2:target,#about2:target {
  display: block;
  opacity: 1;
}

.tab input:checked ~ .tab-content {
  max-height: 25em;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.tab input,
#menu-input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.menu {
  position: absolute;
  width: 30%;
  background-color: grey;
  top: 0;
  left: 0;
  bottom: 0;
}
.content {
  position: absolute;
  left: 30%;
  background-color: cyan;
  top: 0;
  right: 0;
  bottom: 0;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

<html>

<body>
  <div class="menu">
    <div class="tab  expandable">
      <input id="about-input" type="checkbox">
      <label id="about-label" for="about-input">
        <a href="#about">
          <h5 class="nav-item">ABOUT US</h5>
        </a>
      </label>
      <div class="tab-content">
        <h6 class="nav-sub-item"><a href="about/purpose">Purpose</a></h6>
        <h6 class="nav-sub-item"><a href="about/1">1</a></h6>
        <h6 class="nav-sub-item"><a href="about/2">2</a></h6>
        <h6 class="nav-sub-item"><a href="about/3">3</a></h6>
        <h6 class="nav-sub-item"><a href="anout/4">4</a></h6>
      </div>
    </div>
    <div class="tab  expandable">
      <input id="why-input" type="checkbox">
      <label id="why-label" for="why-input">
        <a href="#why">
          <h5 class="nav-item">WHY</h5>
        </a>
      </label>
      <div class="tab-content">
        <h6 class="nav-sub-item"><a href="why/purpose">why is that?</a></h6>
        <h6 class="nav-sub-item"><a href="why/1">1</a></h6>
        <h6 class="nav-sub-item"><a href="why/2">2)</a></h6>
        <h6 class="nav-sub-item"><a href="why/3">3</a></h6>
        <h6 class="nav-sub-item"><a href="why/4">4</a></h6>
      </div>
    </div>
        <div class="tab  expandable">
      <input id="about2-input" type="checkbox">
      <label id="about2-label" for="about2-input">
          <h5 class="nav-item">ABOUT US2</h5>
      </label>
      <div class="tab-content">
        <h6 class="nav-sub-item"><a href="about/purpose">Purpose2</a></h6>
        <h6 class="nav-sub-item"><a href="about/1">1</a></h6>
        <h6 class="nav-sub-item"><a href="about/2">2</a></h6>
        <h6 class="nav-sub-item"><a href="about/3">3</a></h6>
        <h6 class="nav-sub-item"><a href="anout/4">4</a></h6>
      </div>
    </div>
    <div class="tab  expandable">
      <input id="why2-input" type="checkbox">
      <label id="why2-label" for="why2-input">
          <h5 class="nav-item">WHY2</h5>
      </label>
      <div class="tab-content">
        <h6 class="nav-sub-item"><a href="why2/purpose">why2 is that?</a></h6>
        <h6 class="nav-sub-item"><a href="why2/1">1</a></h6>
        <h6 class="nav-sub-item"><a href="why2/2">2)</a></h6>
        <h6 class="nav-sub-item"><a href="why2/3">3</a></h6>
        <h6 class="nav-sub-item"><a href="why2/4">4</a></h6>
      </div>
    </div>
  </div>
  <div class="content">
    <section id="about">
      Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur
      et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia. Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra

    </section>
    <section id="why">

      modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam
      vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros. At nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri,
      miraberis numquam antea visus summatem virum tenuem te sic enixius observantem, ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam.

    </section>
     <section id="about2">
      Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur
      et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia. Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra

    </section>
    <section id="why2">

      modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam
      vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros. At nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri,
      miraberis numquam antea visus summatem virum tenuem te sic enixius observantem, ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam.

    </section>
  </div>
</body>

Is there a way to propagate the event properly? Or a workaround?

解决方案

So I keep the anchor tag in the deepest position. However, the for attribute of the label does not trigger if I click on the anchor (which is nested in the label), and if I click on the rest of the label, I am outside the anchor (and the anchor tag is not updated)

Is there a way to propagate the event properly? Or a workaround?

Layout

1. A <label> with for to a <button> on #3.
2. An <a>nchor that's targeting a hidden <section> located outside of <label>.
3. A <button> linked to the <label> at #1.
4. A <h5>

Sequence of Events

1. Click the on the edge of <label> (pink square-yellow dashed border).

2. Note under the <label> the content of <section>(#content:target appears).

3. This proves that yes it is possible to exploit the link between <label for> and a form element <button>

4. Now repeat process, but start by clicking <a>, you should have the same result.

Capturing...Bubbling

...Phase......Phase

这篇关于我可以将一个事件从一个标签传播到锚链接，没有javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！