我可以将活动从标签传播到没有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中，一个元素的定义是因为不允许交互式后代，并将标签计数为交互式。

所以我把锚标签保持在最深的位置。但是，如果我点击锚点（嵌套在标签中），标签的属性的不会触发，如果我点击标签的其余部分，我在主机之外（并且锚标签没有更新）

编辑：根据要求，我写了一个带有CSS的代码段。在这个版本中，链接接管了前两个菜单项。我删除了第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;}。tab-content {max-height：0;溢出：隐藏; -webkit-transition：max-height .35s; -o-transition：max-height .35s;转换：max-height .35s;}。tab input，＃menu-input {position：absolute;不透明度：0; z-index：-1;}。menu {position：absolute;宽度：30％;背景颜色：灰色顶部：0;左：0; bottom：0;}。content {position：absolute;左：30％;背景颜色：青色;顶部：0;权利：0; bottom：0;}。tab input {position：absolute;不透明度：0; z-index：-1;}  

 < html> <身体GT; < 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> < /标签> < 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> < /标签> < 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> < /标签> < 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> < /标签> < 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坐，paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant，vocali sonu，perflabili tinnitu fidium是什么意思。 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。国际海员Orfitus praefecti potestate regebat urbem aeternam ultra< / section> < section id =why> um ns sed enter enter enter enter enter，arus arus arus arus arus arus sed sed sed sed sed sed sed sed sed sed sed。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。在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 decimen Romam。 < /节> < section id =about2> Quod cum ita坐，paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant，vocali sonu，perflabili tinnitu fidium是什么意思。 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。国际海员Orfitus praefecti potestate regebat urbem aeternam ultra< / section> < section id =why2> um ns sed enter enter enter enter enter，arus arus arus arus arus arus sed sed sed sed sed sed sed sed sed sed sed。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。在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 decimen Romam。 < /节> < / div>< / body>  

正确传播事件的方法？或者解决方法？

解决方案




所以我把锚标签保持在最深的位置。但是，如果我点击锚点（嵌套在标签中），标签的属性的不会触发，如果我点击在标签的其余部分，我在锚点之外（并且锚标签未更新）

有没有办法正确地传播事件？或解决方法？

布局

1. 一个< label> 与 c $ c> 按钮> ＃3。


2. 一个< a> nchor， $ c>< section> 位于< label> 之外。


3. A < button> 链接到< label> 在＃1。


4. A < h5>

事件顺序

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




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




3. 这证明是的，可以利用< label> 和表单元素< button>




4. 现在r epeat过程，但首先点击< a> ，你应该有相同的结果。

捕获 ... 冒泡

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

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屋！