How to make a single tab unclickable?

Question

I use the following Code to create single tabs, but I also want one tab to be a link, not a tab.

<navi>
    <ul class="tabs">
        <li><a href="/" title="linkxtab 1">link 1</a></li>
        <li c-tab="tab-2" title="tab 2">link 2</li>
        <li c-tab="tab-3" title="tab 3">link 3</li>
        <li c-tab="tab-4" title="tab 4">link 4</li>
    </ul>
</navi>

Whenever I click on 'link 1', the other tabs disappear because the codes apparently think I want to activate this tab that actually should be a link and therefore has no content. This happens when I click on the li , not the a , because my 'tabsmenu' styling has some padding between the li and a in it.

Now my question is the following: Is there a CSS-code to enable only this one li without disabling its a ? I already tried pointer-event:none; out, but this - of course - results in blocking everything in the li , also the a .

I use this script for the tabs:

$('.tabs li').click(function(){
    var tab = $(this).attr('c-tab');
    $('.tabs li').removeClass('selected');
    $('.tabscontent').removeClass('selected');

    $(this).addClass('selected');
    $("#"+tab).addClass('selected');
     return false;
});

Is there a way to somehow block only one this one tab with a piece of code by renaming it with something?

Thank You!

//NOTE: I still want the tabs to work, and only the tab called 'linkxtab 1' should not work, except for its link.

Answer 1

Try this:

 .tabs > li { pointer-events: none; } .tabs > li > a{ pointer-events: all!important; } 

Answer 2

If there is any a in clicked li then redirect to the href of the link.

$('.tabs li').click(function () {
    if ($(this).find('a').length) {
        window.location.href = $(this).find('a').attr('href');
    }

    var tab = $(this).attr('c-tab');
    $('.tabs li').removeClass('selected');
    $('.tabscontent').removeClass('selected');

    $(this).addClass('selected');
    $("#" + tab).addClass('selected');
    return false;
});

Answer 3

You can simply do the following to check if the element click was anchor or not and then proceed with rest of the operation.

$('li').on('click',function(e)
{
    var target = $(e.target);
      if(!target.is("a"))
      return false;       
});