Question

我有一个弹出窗体，当用户点击＆＃34;启动灯箱＆＃34;在<label for="lightbox-demo">Launch Lightbox</label>我需要以某种方式将此for="lightbox-demo"集成到我的导航栏中，作为可点击的列表项。

以下是导航栏的代码：

<nav class="collapse navbar-collapse navbar-right" role="navigation">
   <ul id="nav" class="nav navbar-nav">
        <li class="current"><a href="#benefits">Features</a></li>
                        <li><a href="#aboutus">About</a></li>
                        <li><a href="#contact">Contact</a></li>
   </ul>
</nav>

我需要＆＃34;联系＆＃34;上面的链接执行与此代码相同的功能：

<label for="lightbox-demo">Launch Lightbox</label>

此代码与以下灯箱/表单代码相关联：

 <aside class="lightbox">
      <input type="checkbox" class="state" id="lightbox-demo" />
      <article class="content">

<main class="main">
   <a href="#" id="closer" class="closest"><img src="img/x.png" class="btn_close" title="Close Window"  alt="Close Contact Window" /></a>
    <form method="post" action="submit.php" id="contactform" class="signin">
      <input name="name" id="name" type="text" class="feedback-input" placeholder="Name" />
      <input name="email" id="email" type="email" class="feedback-input" placeholder="Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)" required title="Whoops! Invalid email" aria-required="true"/>
           <textarea name="message" id="message" class="feedback-input" placeholder="Comment" required minlength="15" required title="Must be at least 15 characters"></textarea>
            <button id="flybutton">
                <p>Submit </p>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
                    <path id="paper-plane-icon" d="M48z"></path>
                </svg>
            </button>
  </form> 
</main>
    </article>
      <label class="backdrop" for="lightbox-demo"></label>
 </aside>

应该是一个简单的修复，但我被卡住了。非常感谢！

Answer 1

为什么不能用a

包装标签

<label for="lightbox-demo"><a href="#contact">Contact</a></label>

否则你也可以有一个点击处理程序

<a href="#contact" id="launch-contact">Contact</a>

然后

jQuery(function () {
    $('#launch-contact').click(function () {
        $('#lightbox-demo').prop('checked', true);
    })
})

Answer 2

您可以使用单击事件处理程序实现此功能。为标签指定一个id，以便您可以使用jQuery选择它。

<label id="labelForLightbox-demo" class="backdrop" for="lightbox-demo"></label>

在链接上添加ID，以便也可以选择它。

<a id="contactNavLink" href="#contact">Contact</a>

为a链接创建一个click事件处理程序，以防止默认操作，而是触发标签上的click事件。

$('#contactNavLink').click(function(e) {
    e.preventDefault();
    $('#labelForLightbox-demo').click();
});

如何获得执行标签“for”功能的“a”链接？

2 个答案: