Question

我有2个标签面板和2个药丸，用于显示和隐藏它们（我从此处使用了引导程序的4个药丸示例：https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior）。一切都按预期进行。

将它们放在form标签中之后，我尝试使用药丸上的单选按钮来知道在提交时选择了哪个选项卡。问题是单击单选按钮不会选择它们。我尝试在label或a标签之间进行了许多组合，但均未成功。

这里是一个例子：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<form action="http://jkorpela.fi/cgi-bin/echo.cgi" method="post">
<div class="container">
  <div class="row">
    <div class="col-auto">
      <div class="nav flex-column nav-pills btn-group btn-group-toggle" role="tablist" aria-orientation="vertical">
        <a href="#pill-local" class="nav-item nav-link btn-light mb-0" id="pill-local-tab" data-toggle="tab">
                <input type="radio" name="docsrc" id="docsrc_local" value="local" class="form-check-input" checked="checked">
                <label for="docsrc_local">Local</label>
              </a>
        <a href="#pill-internet" class="nav-item nav-link btn-light mb-0 active show" id="pill-internet-tab" data-toggle="tab">
                <input type="radio" name="docsrc" id="docsrc_internet" value="internet" class="form-check-input">
                <label for="docsrc_internet">Internet</label>
              </a>
      </div>
    </div>
    <div class="col">
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade" id="pill-local" role="tabpanel" aria-labelledby="pill-local-tab">
          <div class="form-group row pb-3">
            <label class="col-sm-3 col-md-2 col-form-label" for="document_file">File:</label>
            <div class="col-sm-9 col-md-10 mb-3">
              <input class="form-control" type="file" name="document[file]" id="document_file">
            </div>
          </div>
        </div>
        <div class="tab-pane fade active show" id="pill-internet" role="tabpanel" aria-labelledby="pill-internet-tab">
          <div class="form-group row pb-3">
            <label class="col-sm-3 col-md-2 col-form-label" for="document_xfile">URL:</label>
            <div class="col-sm-9 col-md-10 mb-3">
              <input value="http://example.com/file.zip" class="form-control" type="text" name="document[xfile]" id="document_xfile">
            </div>
          </div>
        </div>
      </div>
    <input type="submit" value="Start" class="btn btn-primary">
    </div>
  </div>
  </div>
</form>

Answer 1

由于this code，未选中单选按钮：

e.preventDefault()

要解决此问题，请从定位标记中删除data-toggle="tab"并为其赋予相同的类。

我给variable类添加锚标记并添加了jquery以显示标签。

$('.variable').click(function () {
   $(this).tab('show');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<form action="http://jkorpela.fi/cgi-bin/echo.cgi" method="post">
  <div class="container">
    <div class="row">
      <div class="col-auto">
        <div class="nav flex-column nav-pills btn-group btn-group-toggle" role="tablist" aria-orientation="vertical">
          <a href="#pill-local" class="nav-item nav-link btn-light mb-0 variable" id="pill-local-tab">
            <input type="radio" name="docsrc" id="docsrc_local" value="local" class="form-check-input" checked="checked">
            <label for="docsrc_local">Local</label>
          </a>
          <a href="#pill-internet" class="nav-item nav-link btn-light mb-0 active show variable" id="pill-internet-tab">
            <input type="radio" name="docsrc" id="docsrc_internet" value="internet" class="form-check-input">
            <label for="docsrc_internet">Internet</label>
          </a>
        </div>
      </div>
      <div class="col">
        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade" id="pill-local" role="tabpanel" aria-labelledby="pill-local-tab">
            <div class="form-group row pb-3">
              <label class="col-sm-3 col-md-2 col-form-label" for="document_file">File:</label>
              <div class="col-sm-9 col-md-10 mb-3">
                <input class="form-control" type="file" name="document[file]" id="document_file">
              </div>
            </div>
          </div>
          <div class="tab-pane fade active show" id="pill-internet" role="tabpanel" aria-labelledby="pill-internet-tab">
            <div class="form-group row pb-3">
              <label class="col-sm-3 col-md-2 col-form-label" for="document_xfile">URL:</label>
              <div class="col-sm-9 col-md-10 mb-3">
                <input value="http://example.com/file.zip" class="form-control" type="text" name="document[xfile]" id="document_xfile">
              </div>
            </div>
          </div>
        </div>
        <input type="submit" value="Start" class="btn btn-primary">
      </div>
    </div>
  </div>
</form>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Answer 2

单击链接时，我成功设置了输入的2**(32*8)属性。像这样：

checked

引导程序选项板和药丸的单选按钮选择问题

2 个答案: