Question

我正在处理一个项目，在选项卡上有多个菜单选项，我需要在每个选项卡菜单上单击，将显示不同类型的menuFood。由于我的jquery没有使用onclick处理该函数，因此选项卡将添加class＆＃34; on＆＃34;并且表的显示将是不同的。请提供建议

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>

Answer 1

您可以使用jQuery.on()来处理点击的元素：

<h3>Please enter username and password to sign up</h3>
<form action="./signup.php" method="post">
Username: <input type="text" name="username" placeholder="User name"><br>
Password: <input type="password" name="password" placeholder="Password"><br>
<input type="submit" value="Sign up">
</form>

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;}

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

使用onclick过滤菜单上的选项卡

2 个答案: