По клику таргат не найден

Question

Я дал ниже html и запрос. При нажатии на ссылку, что конкретный контент, чтобы показать. но это не работает. Не могу найти проблему, кто-нибудь может мне помочь?

HTML

<div class="nav">
    <ul>
        <li id="about" data-targat=".about-info"><a href="#">about</a></li>
        <li><a id="work" data-targat=".work-info"><a href="#">work</a></li>
    </ul>
</div>

<div class="Content-wrapper">
    <div class="about-info content">
        <p>about info goes here</p>
    </div>
    <div class="work-info content">
        <p>work info goes here</p>
    </div>
</div>

jQuery

var $main = $(".Content-wrapper");
var $section = $(".content").hide();
$('.nav ul li').click(function(e) {
    e.preventDefault();
    $section.hide();
    var target = $(this).data('target');
    if(target){
        $section.filter(target).show();
    }
});

Answer 1

1. Вы должны слушать li событие, например $('.nav ul li').on("click", function(e)
2. В HTML data-targat, а в jQuery вы получаете $(this).data('target')
3. В секунду li <li><a id="work" является избыточным тегом.

var $main = $(".Content-wrapper");
var $section = $(".content").hide();
$('.nav ul li').on("click", function(e) {
    $section.hide();
    var target = $(this).data('target');
    if(target){
        $section.filter(target).show();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
    <ul>
        <li id="about" data-target=".about-info"><a href="#">about</a></li>
        <li id="work" data-target=".work-info"><a href="#">work</a></li>
    </ul>
</div>

<div class="Content-wrapper">
    <div class="about-info content">
        <p>about info goes here</p>
    </div>
    <div class="work-info content">
        <p>work info goes here</p>
    </div>
</div>