使用onclick來過濾菜單上的標籤

即時通訊工作在一個項目上有多個菜單選項，我需要在每個標籤菜單上單擊onclick將顯示不同類型的menuFood。由於我的jquery沒有使用onclick函數工作，並且選項卡將添加類「on」，並且表的顯示將有所不同。請指教使用onclick來過濾菜單上的標籤

HTML：

<div class="tab" data-type="wx" data-desc="整合"> 
    <span data-type="wx" class="on">整合</span> 
    <span data-type="sx">第一球</span> 
    <span data-type="qsm">第二球</span> 
    <span data-type="zsm">第三球</span> 
    <span data-type="hsm">第四球</span> 
    <span data-type="em">第五球</span> 
</div>

的jQuery：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.tab span').each(function(){ 
      if($($(this))[0].href==String(window.location)) 
       $(this).parent().addClass('on'); 
     }); 
    }) 
</script>

來源

2017-04-24 Morgan Ng

您在這裏使用'href'，但是在您的html中沒有'a'標籤？ –

@MayankPandeyz對不起，我不知道如何使用href onclick作爲函數onclick –

爲什麼你在if語句中加倍換行'this'？ – Felix

您可以使用jQuery.on()處理點擊的元素：

var $spans = $('.tab span'); 
 
$spans.on('click', function() { 
 
    var $el = $(this); 
 
    $spans.removeClass('on'); 
 
    $el.addClass('on'); 
 
    
 
    // Your logic to use type 
 
    console.log('Clicked:', $el.data('type')); 
 
});

.on {color: red;} 
 
.tab span {cursor: pointer; margin: 10px;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab" data-type="wx" data-desc="整合"> 
 
    <span data-type="wx" class="on">整合</span> 
 
    <span data-type="sx">第一球</span> 
 
    <span data-type="qsm">第二球</span> 
 
    <span data-type="zsm">第三球</span> 
 
    <span data-type="hsm">第四球</span> 
 
    <span data-type="em">第五球</span> 
 
</div>

來源

2017-04-24 08:22:19

非常感謝 –

$(document).ready(function(){ 

     // to preselect the span from the hash whenever u refresh the page. 
     $('span[data-type="'+location.hash.substr(1)+'"]').addClass('on') 
     $('.tab span').click(function(){ 
     $(this).siblings().removeClass('on'); 
      $(this).addClass('on') 
      location.hash = $(this).data('type') 
     }) 
    })

來源

2017-04-24 08:27:22 Rhea

使用onclick來過濾菜單上的標籤

回答

相關問題