Удаление hrefs из заголовка и первого потомка на некоторых элементах

Question

Я в первую очередь дизайнер, поэтому изначально пытался решить эту проблему с помощью CSS ...

Мне было поручено убрать hrefs из некоторых элементов ниже.

В частности, Вкладка первой категории и Заголовок первой категории , а также вкладка Вторая категория и Заголовок второй категории . Другие вкладки и заголовки должны оставаться в виде ссылок.

Сценарий, который я пробовал до сих пор:

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

Который делает фантастическую работу по удалению ВСЕХ hrefs во всей навигации.

Мой код ниже ... что вы все предлагаете?

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

Answer 1

Я предлагаю вам написать функцию в jQuery для этого. Вы никогда не знаете, когда изменится требование. Сегодня это для первых 2 секций, но завтра это может быть для 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
});

Answer 2

что по этому поводу

$(".main-nav > .level1 > li:eq(0)").find(">a, h3 > a").removeAttr("href");
$(".main-nav > .level1 > li:eq(1)").find(">a, h3 > a").removeAttr("href");