Использование onclick для фильтрации вкладки в меню

Question

Я работаю над проектом, который есть несколько пунктов меню на вкладке, который мне нужно нажать на каждой вкладке меню будет отображать различные типы menuFood. Так как мой jquery не работает с функцией onclick и на вкладке будет добавлен класс «on» и отображение таблицы будет другим. Добрый совет

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>

javascript jquery html

2

Morgan Ng 24 Апр 2017 в 11:09

Answer 1

Вы можете использовать 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>

2

Yosvel Quintero Arguelles 24 Апр 2017 в 08:26

Answer 2

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

0

Rhea 24 Апр 2017 в 08:27

Использование onclick для фильтрации вкладки в меню

2 ответа

Похожие вопросы

Новые вопросы

javascript