我创建了一个选项卡来为用户提供两个付款选项，但是当我打开模式时这两个选项都会出现

Question

我在模式中创建了一个选项卡，让用户可以选择使用 credit/debit 卡或使用 checking/savings 帐户付款。它工作正常。我可以从一个选项更改为另一个选项。但是，当模式打开时，credit/debit 选项和 checking/savings 选项的两种形式一起出现。我希望它在打开时只显示 credit/debit 卡片选项，如果用户想要 select checking/savings 选项，他们可以单击选项卡。有人可以帮忙吗？

    <div class="tab">
         <button class="tablinks" onclick="openOption(event, 'Card')">Credit/Debit</button>
         <button class="tablinks" onclick="openOption(event, 'Banking')">Banking</button>
     </div>
     <div id="Card" class="tabcontent">
         <div class="row">
             <div class="col-xs-12">
                 <div class="form-group">
                     <label for="cardNumber">CARD NUMBER</label>
                     <div class="input-group">
                         <input type="tel"
                                class="form-control"
                                name="cardNumber"
                                placeholder="Valid Card Number"
                                autocomplete="cc-number"
                                required autofocus
                                id="cardNumber" />
                         <span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
                     </div>
                 </div>
             </div>
         </div>
         <div class="row">
             <div class="col-xs-7 col-md-7">
                 <div class="form-group">
                     <label for="cardExpiry"><span class="hidden-xs">EXPIRATION</span><span class="visible-xs-inline">EXP</span> DATE</label>
                     <input type="tel"
                            class="form-control"
                            name="cardExpiry"
                            placeholder="12 / 2016"
                            autocomplete="cc-exp"
                            required autofocus
                            id="expYear" />
                 </div>
             </div>
             <div class="col-xs-5 col-md-5 pull-right">
                 <div class="form-group">
                     <label for="cardCVC">CVC</label>
                     <input type="tel"
                            class="form-control"
                            name="cardCVC"
                            placeholder="CVC"
                            autocomplete="cc-csc"
                            required
                            id="cvc" />
                 </div>
             </div>
         </div>

         <div class="row">
             <div class="col-xs-12">
                 <div class="form-group">
                     <label for="couponCode">NAME ON CARD</label>
                     <input type="text" class="form-control" name="couponCode" id="name" />
                 </div>
             </div>
         </div>
         <div class="row">
             <div class="col-xs-12">
                 <div class="form-group">
                     <label for="couponCode">STREET ADDRESS</label>
                     <input type="text" class="form-control" name="couponCode" id="streetAddress" />
                 </div>
             </div>
         </div>
         <div class="row">
             <div class="col-xs-7 col-md-7">
                 <div>
                     <label for="couponCode">COUNTRY</label>
                     <input type="text" class="form-control" name="COUNTY" value="US" readonly />
                 </div>
             </div>

             <div class="col-xs-5 col-md-5 pull-right">
                 <div class="form-group">
                     <label for="couponCode">CITY</label>
                     <input type="text" class="form-control" name="CITY" id="city" />
                 </div>
             </div>
         </div>

         <div class="row">
             <div class="col-xs-7 col-md-7">
                 <div>
                     <label for="couponCode">REGION</label>
                     <div class="form-group">
                         <div class="col-xs-7">
                             <select class="form-control" id="state" name="state">
                                 <option value="" selected>N/A</option>
                                 <option value="AK">Alaska</option>
                                 <option value="AL">Alabama</option>
                                 <option value="AR">Arkansas</option>
                                 <option value="AZ">Arizona</option>
                                 <option value="CA">California</option>
                                 <option value="CO">Colorado</option>
                                 <option value="CT">Connecticut</option>
                                 <option value="DC">District of Columbia</option>
                                 <option value="DE">Delaware</option>
                                 <option value="FL">Florida</option>
                                 <option value="GA">Georgia</option>
                                 <option value="HI">Hawaii</option>
                                 <option value="IA">Iowa</option>
                                 <option value="ID">Idaho</option>
                                 <option value="IL">Illinois</option>
                                 <option value="IN">Indiana</option>
                                 <option value="KS">Kansas</option>
                                 <option value="KY">Kentucky</option>
                                 <option value="LA">Louisiana</option>
                                 <option value="MA">Massachusetts</option>
                                 <option value="MD">Maryland</option>
                                 <option value="ME">Maine</option>
                                 <option value="MI">Michigan</option>
                                 <option value="MN">Minnesota</option>
                                 <option value="MO">Missouri</option>
                                 <option value="MS">Mississippi</option>
                                 <option value="MT">Montana</option>
                                 <option value="NC">North Carolina</option>
                                 <option value="ND">North Dakota</option>
                                 <option value="NE">Nebraska</option>
                                 <option value="NH">New Hampshire</option>
                                 <option value="NJ">New Jersey</option>
                                 <option value="NM">New Mexico</option>
                                 <option value="NV">Nevada</option>
                                 <option value="NY">New York</option>
                                 <option value="OH">Ohio</option>
                                 <option value="OK">Oklahoma</option>
                                 <option value="OR">Oregon</option>
                                 <option value="PA">Pennsylvania</option>
                                 <option value="PR">Puerto Rico</option>
                                 <option value="RI">Rhode Island</option>
                                 <option value="SC">South Carolina</option>
                                 <option value="SD">South Dakota</option>
                                 <option value="TN">Tennessee</option>
                                 <option value="TX">Texas</option>
                                 <option value="UT">Utah</option>
                                 <option value="VA">Virginia</option>
                                 <option value="VT">Vermont</option>
                                 <option value="WA">Washington</option>
                                 <option value="WI">Wisconsin</option>
                                 <option value="WV">West Virginia</option>
                                 <option value="WY">Wyoming</option>
                             </select>
                         </div>
                     </div>
                 </div>
             </div>

             <div class="col-xs-5 col-md-5 pull-right">
                 <div class="form-group">
                     <label for="couponCode">POSTAL CODE</label>
                     <input type="text" class="form-control" name="couponCode" id="postalCode" />
                 </div>
             </div>
         </div>

         <br>
         <div class="row">
             <div class="col-xs-12">
                 <button class="btn btn-success btn-lg btn-block" id="createtoken" type="submit">Save</button>
             </div>
         </div>
     </div>
     <div id="Banking" class="tabcontent">
         <div class="row">
             <div class="col-xs-12">
                 <div class="form-group">
                     <label for="accountType">Account Type</label>
                     <select id="accountType">
                         <option value="">Please select an account</option>
                         <option value="checking">Checking</option>
                         <option value="savings">Savings</option>
                     </select>
                 </div>
             </div>
         </div>
         <div class="row">
             <div class="col-xs-12 col-md-12">
                 <div class="form-group">
                     <label for="routeNumber"><span class="hidden-xs">ROUTING NUMBER</span></label>
                     <input type="tel"
                            class="form-control"
                            name="routeNumber"
                            placeholder="111111111111" />
                 </div>
             </div>
             @*<div class="col-xs-5 col-md-5 pull-right">
                <div class="form-group">
                    <label for="cardCVC">CVC</label>
                    <input type="tel"
                           class="form-control"
                           name="cardCVC"
                           placeholder="CVC"
                           autocomplete="cc-csc"
                           required
                           id="cvc" />
                </div>
            </div>*@
         </div>

         <div class="row">
             <div class="col-xs-6 col-md-6">
                 <div>
                     <label for="accountNumber">ACCOUNT NUMBER</label>
                     <input type="text" class="form-control" name="ACCOUNTNUMBER" value="ACCOUNT NUMBER" readonly />
                 </div>
             </div>

             <div class="col-xs-6 col-md-6">
                 <div class="form-group">
                     <label for="confirmAccount">CONFIRM ACCOUNT NUMBER</label>
                     <input type="text" class="form-control" name="CONFIRMACCOUNT" id="confirmAccount" value="CONFIRM ACCOUNT NUMBER" />
                 </div>
             </div>
         </div>
         <div class="row">
             <div class="col-xs-12 col-md-12">
                 <div class="form-group">
                     <label for="holdersName"><span class="hidden-xs">ACCOUNT HOLDERS NAME</span></label>
                     <input type="tel"
                            class="form-control"
                            name="holdersName"
                            placeholder="YOUR NAME" />
                 </div>
             </div>
         </div>
         <br>
         <div class="row">
             <div class="col-xs-12">
                 <button class="btn btn-success btn-lg btn-block" id="createtoken" type="submit">Save</button>
             </div>
         </div>
     </div>
     
     <script>
          function openOption(evt, optionName) {
            var i, tabcontent, tablinks;
                tabcontent = document.getElementsByClassName("tabcontent");
                for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(optionName).style.display = "block";
            evt.currentTarget.className += " active";
            }

     </script>

Answer 1

<div id="Banking" class="tabcontent" hidden>

这应该可以解决问题

Answer 2

display:none

如果您希望默认情况下隐藏这两个链接，请为这两个链接添加此 css，或者如果您希望默认情况下显示另一个链接，请添加到其中一个。

我创建了一个选项卡来为用户提供两个付款选项，但是当我打开模式时这两个选项都会出现

I created a tab to give users two options for payments, but both options appear when I open up modal

html

javascript

tabs