Я работаю над проектом, который есть несколько пунктов меню на вкладке, который мне нужно нажать на каждой вкладке меню будет отображать различные типы 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>
2
Morgan Ng
24 Апр 2017 в 11:09
2 ответа
Лучший ответ
Вы можете использовать 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
$(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
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.