如何将模糊事件放在特定的id上

时间:2014-01-15 07:06:32

标签: javascript jquery html

我想在特定ID上添加模糊功能。我在这里做错了什么?我想在tab1的测试1中的用户按Tab键时编写一个函数,它将模糊选项卡1并激活选项卡2:

<ul class='tabs'>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1' class="tabss">
    <ul class= "set2"> 
        <li>  test 1<asp:TextBox ID="test1" runat="server" /></li>        
    </ul>
</div>
<div id='tab2' class="tabss">
    <ul class= "set2"> 
        <li>  test 3<asp:TextBox runat="server" /></li>
    </ul>
</div>
<div id='tab3' class="tabss">
    <ul class= "set"> 

        <li>  test 6<asp:TextBox  runat="server"  ID="test6" /></li>
    </ul>
</div>

脚本

$('#last').blur(function () {    
    alert("test");
});

这是jsfiddle

3 个答案:

答案 0 :(得分:0)

尝试使用:

$("#itemId").mouseenter(function () {
    alert ("mouse entered");
}).mouseleave(function () {      
    alert("mouse leave");
});

.blur仅适用于输入字段。

希望这有帮助。

答案 1 :(得分:0)

现在很清楚,在用户失去每个标签中最后一个文本框的焦点后,您想要导航到下一个标签。因此你可以这样做:

$('.tabss').each(function() { 

    $('input:last',this).blur(function () {
        alert('tab done!');
   })

});

这是小提琴(有多个输入):http://jsfiddle.net/2TH8K/1/

这是另一个小提琴,更新到原始示例(注意我用html文本框替换了ASP.NET文本框) http://jsfiddle.net/4n5fL/7/

答案 2 :(得分:0)

.tabs a.active span {
    color: #BF0404;
    display: inline-block;
    font-weight: bold;
    padding: 19px 12px 8px 5px;
    text-decoration: none;
}
.tabs a span {
    height: 34px;
}
.tabss{
  background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #EDEDED;
    padding: 10px;
    width: 600px;
}

        <ul class='tabs'>
                                <li class="firsttab"><a href='#tab1'><span>Step 1</span></a></li>
                                <li class="secondtab"><a href='#tab2'><span>Step 2</span></a></li>
    <li class="thirdtab"><a href='#tab2'><span>Step 2</span></a></li>
                            </ul>

        jQuery(document).ready(function ($) {

            $('.tabs li.firsttab a').addClass('active');
            $('#tab1').fadeIn();
            $('#tab2').fadeOut();
            $('#tab3').fadeOut();
            }



            $('.tabs li.firsttab a').click(function () {
                $('.tabs li.firsttab a').parent().siblings().find('a').removeClass('active');
                $(this).addClass('active');
                $('#tab1').fadeIn();
                $('#tab2').fadeOut();
                $('#tab3').hide();

          });


            $('.tabs li.secondtab a').click(function () {
                $('.tabs li.secondtab a').parent().siblings().find('a').removeClass('active');
                $(this).addClass('active');

                $('#tab1').hide();
                $('#tab2').fadeIn();
           });

您还需要为第三个标签点击添加事件。我希望这能为你提供良好的解决方案。