在li中添加换行符时显示隐藏不起作用

Question

以下是我单击li时显示/隐藏内容的方法，但当我用<a></a>包装文本，然后更新脚本时，它就不再有效了，下面是我的两个工作和不工作的例子

工作

   <ul class="tabbed-reports">
    <li class="report1 current">Chat</li>
    <li class="report2">Tweets</li>
    <li class="report3">Activity</li>
    <li class="report4">Options</li>
    <li class="report5">Notes</li>
   </ul>
   <div class="reports-content">
    <div class="report1">REPORT 1</div>
    <div class="report2" style="display:none;">REPORT 2</div>
    <div class="report3" style="display:none;">REPORT 3</div>
    <div class="report4" style="display:none;">REPORT 4</div>
    <div class="report5" style="display:none;">REPORT 5</div>
   </div>

<script>
$('.tabbed-reports li').on('click',function(e){
    $('.reports-content>.'+ e.target.classList[0]).show().siblings().hide();
});
var selector = '.tabbed-reports li';
$(selector).on('click', function(){
    $(this).parent().find('li').removeClass('active');
    $(this).parent().find('li').removeClass('current');
    $(this).addClass('active');
});
</script>

但是，如果我用标签把li包起来，然后修改脚本，它将不再有效，我做错了什么？

   <ul class="tabbed-reports">
    <li class="report1 current"><a>Chat</a></li>
    <li class="report2"><a>Tweets</a></li>
    <li class="report3"><a>Activity</a></li>
    <li class="report4"><a>Options</a></li>
    <li class="report5"><a>Notes</a></li>
   </ul>
   <div class="reports-content">
    <div class="report1">REPORT 1</div>
    <div class="report2" style="display:none;">REPORT 2</div>
    <div class="report3" style="display:none;">REPORT 3</div>
    <div class="report4" style="display:none;">REPORT 4</div>
    <div class="report5" style="display:none;">REPORT 5</div>
   </div>

<script>
$('.tabbed-reports li a').on('click',function(e){
    $('.reports-content>.'+ e.target.classList[0]).show().siblings().hide();
});
var selector = '.tabbed-reports li a';
$(selector).on('click', function(){
    $(this).parent().find('li a').removeClass('active');
    $(this).parent().find('li a').removeClass('current');
    $(this).addClass('active');
});
</script>

Answer 1

我认为问题在于e.target.classList[0]是空的，因为click事件绑定到<a>元素，并且它没有任何类。

如果您想要HTML结构，则必须将class="report1"和其他类设置为<a>元素。

Answer 2

它将不再工作，因为在第二个代码中有

$('.tabbed-reports li a').on('click',function(e){
    $('.reports-content>.'+ 
    e.target.classList[0]).show().siblings().hide();
});

但是e.target.classList[0]不是指向

li

，而是指向

一个

标记，该标记没有任何类。尝试用替换它

$('.tabbed-reports li a').on('click',function(e){
    $('.reports-content>.'+ 
    e.target.parentElement.classList[0]).show().siblings().hide();
});

Answer 3

您可以执行以下操作：

$(selector).on('click', function(e){
    e.preventDefault();
    $(this).parent().addClass('active').siblings('.active,.current')
                                       .removeClass('active current');
});

首先，您转到上层（LI），并向其添加active类。然后，选择其具有类active和current的同级，并从匹配的元素中删除这些类。

注意，我还添加了e.preventDefault()，以在单击A元素时防止和重定向操作。