如何关注/显示标签窗格'如果tab字段在引导选项卡上使用jquery为空?

时间:2015-11-26 13:49:13

标签: javascript jquery html css twitter-bootstrap

我尝试在Bootstrap选项卡上显示一个选项卡窗格,其中字段为空。 这是我的HTML:

<div class="container">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <form method="POST" id="frmUser">
        <div class="tab-content">

            <div role="tabpanel" class="tab-pane active" id="home">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">First Name</label>
                        <input type="text" name="mirst_name" class="form-control">
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">Middle Name</label>
                        <input type="text" name="middle_name" class="form-control">
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">Last Name</label>
                        <input type="text" name="last_name" class="form-control">
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="settings">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">Email Address</label>
                        <input type="text" name="email" class="form-control">
                        <button type="submit" class="btn btn-primary" name="save">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

在最后一个标签上提交&#39; 设置检查所有标签字段不为空白,如果空白则显示特定标签窗格。另外设置&#39; nav-tabs&#39;

  • 激活。任何方案?

    DEMO jsfiddle

  • 3 个答案:

    答案 0 :(得分:0)

    脚本

    $('input[name=save]').on('click',function(){     
    
    var tabs=$('.tab-pane input');
    $('.nav.nav-tabs li').removeClass('active');
    
    $('.tab-pane').removeClass('active');
    
    var bool=false;
    var bool=$.each(tabs,function(i,v){
    
        if($(v).val().length<=0){
            $('ul.nav li:eq('+i+')').addClass('active');
    
            $(v).parent().parent().parent().addClass('active');
    
            $(this).focus();
            return false;
    
        }
    
    
    })
    if(bool=true){window.location.href='http://google.com'}
    
    }); 
    

    //更改按钮按钮以html输入,如下所示

    HTML

    <input type="button" class="btn btn-primary " name="save" value="submit"></button>
    

    答案 1 :(得分:0)

    完整示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="jquery-2.1.4.min.js"></script>
        <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="bootstrap.min.css" >
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="bootstrap-theme.min.css">
    
    <!-- Latest compiled and minified JavaScript -->
    
    <script src="bootstrap.min.js"></script>
    
    </head>
    <body>
        <div class="container">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
        </ul>
    
        <form method="POST" id="frmUser">
            <div class="tab-content">
    
                <div role="tabpanel" class="tab-pane active" id="home">
                    <div class="panel panel-primary">
                        <div class="panel-body">
                            <label class="control-label">First Name</label>
                            <input type="text" name="mirst_name" class="form-control">
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">
                    <div class="panel panel-primary">
                        <div class="panel-body">
                            <label class="control-label">Middle Name</label>
                            <input type="text" name="middle_name" class="form-control">
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="messages">
                    <div class="panel panel-primary">
                        <div class="panel-body">
                            <label class="control-label">Last Name</label>
                            <input type="text" name="last_name" class="form-control">
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="settings">
                    <div class="panel panel-primary">
                        <div class="panel-body">
                            <label class="control-label">Email Address</label>
                            <input type="text" name="email" class="form-control">
                            <input type="button" class="btn btn-primary " name="save" value="submit"></button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script>
    $('input[name=save]').on('click',function(){ alert('hi');
    
    
    var tabs=$('.tab-pane input');
    $('.nav.nav-tabs li').removeClass('active');
    
    $('.tab-pane').removeClass('active');
    
    var bool=false;
    var bool=$.each(tabs,function(i,v){ 
    
        if($(v).val().length<=0){
            $('ul.nav li:eq('+i+')').addClass('active');
    
            $(v).parent().parent().parent().addClass('active');
    
            $(this).focus();
            return false;
    
        }
    
    
    })
    if(bool=true){window.location.href='http://google.com'}
    
    });
    </script>
    </body>
    </html>
    

    答案 2 :(得分:-1)

    找到以下用于功能的jquery脚本

    $(document).on('click','button[name="save"]',function(){ 
    
      var tabs=$('.tab-pane input');
      $('.nav.nav-tabs li,.tab-pane').removeClass('active');
    
    
      var bool=false;
      $.each(tabs,function(index,value){ 
    
      if($(this).val().length<=0){
        $('ul.nav li:eq('+index+')').addClass('active');
      $('.tab-content .tab-pane:eq('+index+')').addClass('active');
       $(this).focus();
        return false;
    
       }
    
      });
      return false;
    
    
      });
    

    演示链接: http://jsfiddle.net/asimshahiddIT/p7n9vdon/