Bootstrap HTML - 选项卡作为单选按钮表单

Question

我有一个正在编辑的引导模板。我正在处理一个表单页面，但我似乎无法获得选定的单选按钮，这实际上是一个用于 POST 到 PHP 的选项卡列表

<div class="from-step-content">

        <ul class="nav nav-tabs nav-tabs-bordered" role="tablist" name="selected-item">

            <li class="nav-item">

                <a class="nav-link active" data-toggle="tab" href="#item-one">

                    <div class="nav-tabs-icon">

                        <img src="images/1.png" alt="icon">

                        <img src="images/1-color.png" alt="icon">

                    </div>

                    <span>Item One</span>

                </a>

            </li>

            <li class="nav-item">

                <a class="nav-link" data-toggle="tab" href="#item-two">

                    <div class="nav-tabs-icon">

                        <img src="images/2.png" alt="icon">

                        <img src="images/2-color.png" alt="icon">

                    </div>

                    <span>Item Two</span>

                </a>

            </li>

            <li class="nav-item">

                <a class="nav-link" data-toggle="tab" href="#item-three">

                    <div class="nav-tabs-icon">

                        <img src="images/3.png" alt="icon">

                        <img src="images/3-color.png" alt="icon">

                    </div>

                    <span>Item Three</span>

                </a>

            </li>

        </ui>

    </div>

这是在 PHP 脚本中使用 POST 的方法，但是我无法弄清楚我实际上是如何获得确实选择了哪个项目的。有任何想法吗？谢谢

Answer 1

您应该使用 javascript 进行不可见的单选框输入，因为您无法发送到 PHP HTML DOM，因此您需要使用表单进行操作。所以为了快速帮助：<form action="post.php" method="post">&nbsp; &nbsp; <div class="from-step-content">&nbsp; &nbsp; &nbsp; &nbsp; <ul class="nav nav-tabs nav-tabs-bordered" role="tablist" name="selected-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link active" data-toggle="tab" href="#item-one">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="item" value="1" style="display:none;"/>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="nav-tabs-icon">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/1.png" alt="icon">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/1-color.png" alt="icon">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item One</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" data-toggle="tab" href="#item-two">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="item" value="1" style="display:none;"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="nav-tabs-icon">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/2.png" alt="icon">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/2-color.png" alt="icon">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item Two</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" data-toggle="tab" href="#item-three">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="item" value="1" style="display:none;"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="nav-tabs-icon">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/3.png" alt="icon">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/3-color.png" alt="icon">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Item Three</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; </ui>&nbsp; &nbsp; </div>&nbsp; &nbsp; <button>Submit</button></form><script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('input[type="radio"]').prop("checked", false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(e.target).find('input[type="radio"]').prop("checked", true);&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; });</script>