Question

下面的工作是在我点击li时显示/隐藏内容，但当我用<a></a>包装文本时，然后更新脚本，它不再有效，这是我的工作和不工作的2个例子

工作

   <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]为空，因为点击事件已绑定到<a>元素，并且它没有任何类。

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

Answer 2

您可以执行以下操作：

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

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

请注意，当您点击e.preventDefault()元素时，我还添加了A来阻止和重定向操作。

Answer 3

它将不再有效，因为在第二个代码中你有

$('.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();
});

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

3 个答案: