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">

    <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">

                    <input type="radio" name="item" value="1" style="display:none;"/> 

                    <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">

                    <input type="radio" name="item" value="1" style="display:none;"/>

                    <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">

                    <input type="radio" name="item" value="1" style="display:none;"/>

                    <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>

    <button>Submit</button>

</form>

<script>

    $(document).ready(function(){

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

          $('input[type="radio"]').prop("checked", false);

          $(e.target).find('input[type="radio"]').prop("checked", true);

        })

    });

</script>