如何关注/显示标签窗格＆＃39;如果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/

    相关问题
    最新问题