Question

我主要是设计师，所以最初尝试使用CSS来解决这个问题...

我的任务是从以下某些元素中删除hrefs。

具体来说，第一类别标签和第一类别标题，以及第二类别标签和第二类别头即可。其他标签和标题需要保留为链接。

我到目前为止尝试过的脚本是

$(".main-nav > .level1 > li > a").removeAttr("href");

在删除所有导航中的所有hrefs方面做得非常出色。

我的代码如下......你们都建议什么？

＆＃13;

<nav class="main-nav">
         <ul class="level1">
            <li class="FirstCat first tabbed">
               <a href="firstcat" tabindex="0">First Category Tab</a>
               <div class="dropdown" aria-expanded="true">
                  <h3><a href="firstcat">First Category Header</a></h3>
                  <ul class="level1 links">
                     <li class="Membership first">
                        <a href="firstcat/product1" tabindex="0">Product 1</a>
                     </li>
                     <li class="Checking">
                        <a href="firstcat/product2" tabindex="-1">Product 2</a>
                     </li>
                     <li class="Savings">
                        <a href="firstcat/product3" tabindex="-1">Product 3</a>
                     </li>
                  </ul>
               </div>
            </li>
            <li class="SecondCat">
               <a href="secondcatservices" tabindex="-1">Second Category Tab</a>
               <div class="dropdown" aria-expanded="false">
                  <h3><a href="secondcatservices">Second Category Header</a></h3>
                  <ul class="level1 links">
                     <li class="Membership first"><a href="secondcatservices/product1" tabindex="0">Membership</a></li>
                     <li class="Checking"><a href="secondcatservices/product2" tabindex="-1">Checking</a></li>
                     <li class="Savings"><a href="secondcatservices/product3" tabindex="-1">Savings</a></li>
                  </ul>
               </div>
            </li>
            <li class="ThirdCat">
               <a href="thirdcat" tabindex="-1">Third Category Tab</a>
               <div class="dropdown" aria-expanded="false">
                  <div class="left">
                     <h3><a href="thirdcat">Third Category Header</a></h3>
                     <ul class="level1 links">
                        <li class="Service first"><a href="thirdcat/service1" tabindex="0">Service 1</a></li>
                        <li class="Service2"><a href="thirdcat/service-2" tabindex="-1">Service 2</a></li>
                        <li class="Service 3"><a href="thirdcat/service-3" tabindex="-1">Service 3</a></li>
                     </ul>
                  </div>
               </div>
            </li>
            <li class="FourthCat">
               <a href="fourth-cat" tabindex="-1">Fourth Category Tab</a>
               <div class="dropdown" aria-expanded="false">
                  <div class="left">
                     <h3><a href="fourth-cat/fourth-cat">Fourth Category Header</a></h3>
                     <ul class="level1 links">
                        <li class="Topic1"><a href="fourth-cat/fourth-cat/topic1" tabindex="0">Topic 1</a></li>
                        <li class="Topic2"><a href="fourth-cat/fourth-cat/topic2" tabindex="-1">Topic 2</a></li>
                        <li class="Topic 3"><a href="fourth-cat/fourth-cat/topic3" tabindex="-1">Topic 3</a></li>
                     </ul>
                  </div>
               </div>
            </li>
         </ul>
      </nav>

＆＃13;

Answer 1

这个怎么样

document.querySelector(".add_your_qora").addEventListener("click", e => {
        if (e.target.classList.contains("myclass") {
            console.log("The element has myclass");
        }
};

Answer 2

我建议您在jQuery中编写一个函数来执行此操作。您永远不知道需求何时会发生变化。今天它的前两个部分，但明天它可能是3个部分等。

请参阅JsFiddle：https://jsfiddle.net/123kuhLs/

希望它对你有所帮助。

/**
 * Method to take the parent element and make first n links as normal text
 * @param {jQueryElement} $parent
 * @param {Number} n
 */
function removingLinks($parent, n) {
  var $list = $parent.find('> li');
  for (var i = 0; i < n; i++) {
    // Select all the links
    var $allLinks = $list.eq(i).find('a');
    // Make first two links normal text
    // Pass a 3 parameter to make even this dynamic
    // For now I hardcoded it to make 2 links normal text
    $allLinks.eq(0).removeAttr('href');
    $allLinks.eq(1).removeAttr('href');
  }
}

// Added an event to button
$('.remove-links').click(function() {
  // Select the parent ul element
  var $parent = $('.main-nav > ul');
  // Remove links from first 2 sections
  removingLinks($parent, 2);
  // removingLinks($parent, 3); --> For first 3 sections
});

从某些元素的标题和第一个子元素中删除href

2 个答案: