Question

我有以下代码组合：

的index.html

<body>
  <div class="checkout">
    <input type="checkbox" id="cc" checked>
    <label for="cc">
        <div class="tab cc">
            <h3 class="tab__title">Credit Card<span class="fa fa-check"></span></h3>
            <div class="tab__content">
                <div class="input-group">
                    <input type="text" class="full cc-number" placeholder="Card Number">
                    <input type="text" class="expiry" placeholder="MM / YY"><input type="text" class="cvc" placeholder="CVC">
                    <input type="checkbox" id="remember"><label for="remember">Remember me</label>
                    <button type="button" class="button--action button--circle">GO</button>
                </div>
            </div>
        </div>
    </label>

    <input type="checkbox" id="agreement">
    <label for="agreement">
        <div class="tab agreement">
            <h3 class="tab__title">Agreement<span class="fa fa-check"></h3>
            <div class="tab__content">
                <div class="agreement__text">
                    <p>Kombucha offal kale chips semiotics, health goth shoreditch craft beer pickled occupy gentrify wayfarers franzen. Fanny pack crucifix jean shorts portland mumblecore chartreuse. Yr migas scenester, hoodie artisan fap chicharrones brunch ramps. Waistcoat venmo austin photo booth 90's affogato, viral craft beer readymade iPhone fashion axe. Cliche health goth cold-pressed cronut banjo selfies ennui synth locavore, etsy hoodie ethical. Synth everyday carry small batch, try-hard photo booth green juice tumblr farm-to-table normcore. Irony kinfolk fanny pack, beard scenester drinking vinegar asymmetrical man braid helvetica venmo chicharrones.
                    </p>
                </div>
            </div>
        </div>
    </label>
... More code

index.js

(function() {
    var tabs = $('.tab');

    tabs.on('click', function(e) {
        var checkbox = $(this).parents('label').prev();

        // Fix for all tabs collapsing when click is within the area taken up by a button
        if (e.target.tagName === 'BUTTON') {
            $(checkbox).prop('checked', true);
        }

        // Don't collapse the currently open tab when clicked on
        if (checkbox.is(':checked')) {
            e.preventDefault();
        }

        // Allow only one tab to be open at a time
        checkbox.siblings('input:checkbox').prop('checked', false);
    });
})();

我也有一些CSS，但我不认为它非常相关。代码有不同的选项卡，单击其中一个将打开它并关闭一个打开的选项卡。如何创建一个按钮，打开后面的标签？每个标签都是

https://jsfiddle.net/x7kredj0/

Answer 1

在按钮上添加click功能和一些jQuery乐趣：

$('.openNext').on('click',function(e){  
 e.stopImmediatePropagation();     
 $(this).closest('label').next('input').next('label').find('h3').trigger('click');
});

更新小提琴：https://jsfiddle.net/x7kredj0/7/

Answer 2

这是解决方案：

/* solution */
.tab::after {
  content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAOVBMVEUAAAD///////////////////////////////////////////////////////////////////////8KOjVvAAAAEnRSTlMABQYQERQVHjthZnBzfo7p6/GnIDUbAAAAR0lEQVQYV53IORaAMAwD0QHCZjZb9z8sDc8EyqjSH2hYX/0OOGJMFz9hVZbi2gBTTAAMrh3ekn5KZTDFclUGkz4G+xlm2ncDeu4CtLEndvMAAAAASUVORK5CYII=);
    position: absolute;
    top: 33px;
    right: 15px;
}

.checkout input[type="checkbox"]:checked + label .tab::after {
  content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAARVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////9SnXPCAAAAFnRSTlMAAQIEBQYnL3+Rl56goqqrrbTFx875F1Lu/gAAAEpJREFUGFelyUkCgCAMQ9GAE+KM0vsf1SiCuJWs+l+Bv6tM820nRy5snwt7rYdX2IuGGqOERpKr1f15ZJM5NGWSHWhtbErfpbtkJ8I2AzMNzbhgAAAAAElFTkSuQmCC);
}

在此处查看结果 jsfiddle

Answer 3

我已根据您的需要修改了您的代码。请试一试

＆＃13;

(function() {
  var tabs = $('.tab');

  tabs.on('click', function(e) {

    var checkbox = $(this).parents('label').prev();
    // Fix for all tabs collapsing when click is within the area taken up by a button
    if (e.target.tagName === 'BUTTON') {
      $(checkbox).prop('checked', true);
    }

    // Don't collapse the currently open tab when clicked on
    if (checkbox.is(':checked')) {
      e.preventDefault();
    }

    // Allow only one tab to be open at a time
    checkbox.siblings('input:checkbox').prop('checked', false);
  });

  var goBtn = $('#go-btn');
  goBtn.on('click', function(e) {
    e.stopPropagation();
    var checkbox = $('#agreement');
    $(checkbox).prop('checked', true);
    // Allow only one tab to be open at a time
    checkbox.siblings('input:checkbox').prop('checked', false);
  });
})();

＆＃13;

@import "https://fonts.googleapis.com/css?family=Roboto:300, 400,700";

/*** [Colours] ***/


/*** [Resets] ***/

html {
  box-sizing: border-box;
  background: #22313F;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  overflow-y: scroll;
}


/*** [Vars & Mixins] ***/


/*** [Menu styling] ***/

.checkout {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 500px;
  font-family: "Roboto";
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.75);
}

.checkout input[type="checkbox"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.checkout input[type="checkbox"]+label {
  position: relative;
  cursor: pointer;
}

.checkout input[type="checkbox"]+label:first-of-type .tab {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.checkout input[type="checkbox"]+label:last-of-type .tab {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.checkout input[type="checkbox"]:checked+label .tab {
  height: 250px;
}

.checkout input[type="checkbox"]:checked+label .tab__content {
  opacity: 1;
}

.checkout input[type="checkbox"]:checked+label h3 .fa-check {
  opacity: 0;
}

.checkout .tab {
  position: relative;
  width: 100%;
  height: 83.33333px;
  padding: 0.5rem 1.5rem;
  transition: height 400ms cubic-bezier(0.72, -0.25, 0.4, 1.2);
  z-index: 2;
}

.checkout .tab__content {
  opacity: 0;
  transition: opacity 500ms ease;
}

.checkout .tab .text-large {
  font-size: 3rem;
  font-weight: 700;
}

.checkout .tab__title {
  font-weight: 300;
  margin-bottom: 35px;
}

.checkout .tab__title .fa-chevron-left {
  margin-right: 15px;
}

.checkout .tab__title .fa-check {
  position: absolute;
  right: 2rem;
  opacity: 1;
  transition: opacity 300ms ease;
}

.checkout .tab .button--action {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  height: 40px;
  margin-top: 1.5rem;
  padding: 0 1rem;
  background: transparent;
  color: #eee;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid #eee;
  cursor: pointer;
  border-radius: 20px;
  z-index: 1;
}

.checkout .tab .button--circle {
  width: 40px;
  padding: 0;
  border-radius: 50%;
}

.checkout .tab.cc {
  /* Permalink - use to edit and share this gradient:         http://colorzilla.com/gradienteditor/#a9ead6+0,9edacb+100 */
  background: #a9ead6;
  /* Old browsers */
  background: linear-gradient(to right, #a9ead6 0%, #9edacb 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  color: #228b6b;
}

.checkout .tab.cc .input-group input[type='text'] {
  padding: 0.7rem 0.8rem;
  background: transparent;
  border: 1px solid #66ae98;
}

.checkout .tab.cc .input-group input[type='text'].cc-number {
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 0;
}

.checkout .tab.cc .input-group input[type='text'].expiry {
  width: 60%;
  border-bottom-left-radius: 5px;
  border-right: 0;
}

.checkout .tab.cc .input-group input[type='text'].cvc {
  width: 40%;
  border-bottom-right-radius: 5px;
}

.checkout .tab.cc .input-group input[type='text'].expiry,
.checkout .tab.cc .input-group input[type='text'] .cvc {
  display: inline-block;
}

.checkout .tab.cc .input-group input[type='text']:focus {
  outline: 0;
}

.checkout .tab.cc .input-group input[type='checkbox']+label:before {
  display: inline-block;
  margin-top: 2rem;
  margin-right: 0.5rem;
  width: 20px;
  height: 20px;
  background: transparent;
  content: '\00a0';
  border: 1px solid #66ae98;
  border-radius: 5px;
}

.checkout .tab.agreement {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#46cdcf+0,3fb8bf+100 */
  background: #46cdcf;
  /* Old browsers */
  background: linear-gradient(to right, #46cdcf 0%, #3fb8bf 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  color: #1f7577;
}

.checkout .tab.agreement .tab__content {
  height: 100%;
}

.checkout .tab.agreement .agreement__text {
  width: 100%;
  height: 60%;
  margin-top: -1rem;
  overflow-y: scroll;
}

.checkout .tab.agreement .agreement__text::-webkit-scrollbar {
  width: 10px;
  background: #1f7577;
  border-radius: 10px;
}

.checkout .tab.agreement .agreement__text::-webkit-scrollbar-track {
  background: #1f7577;
  border-radius: 10px;
}

.checkout .tab.payment {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3d84a8+0,37779c+100 */
  background: #3d84a8;
  /* Old browsers */
  background: linear-gradient(to right, #3d84a8 0%, #37779c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  color: #a1c9dd;
}

.checkout .tab.confirmation {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#48466d+0,413f67+100 */
  background: #48466d;
  /* Old browsers */
  background: linear-gradient(to right, #48466d 0%, #413f67 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  color: #9593b9;
}

.checkout .tab.confirmation .button--action {
  bottom: 5rem;
  opacity: 0.4;
  transition: opacity 200ms ease;
}

.checkout .tab.confirmation .button--action.no {
  left: 1.5rem;
}

.checkout .tab.confirmation .button--action.yes {
  width: 120px;
  left: 6.5rem;
}

.checkout .tab.confirmation .button--action:hover {
  opacity: 1;
}

.checkout .tab.confirmation .button--action .fa {
  margin-right: 5px;
}

::-webkit-input-placeholder {
  color: #2b8368;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #2b8368;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #2b8368;
}

:-ms-input-placeholder {
  color: #2b8368;
}

＆＃13;

<title>Checkout Interface</title>



<div class="checkout">
  <input type="checkbox" id="cc" checked>
  <label for="cc">
    <div class="tab cc">
      <h3 class="tab__title">Credit Card<span class="fa fa-check"></span></h3>
      <div class="tab__content">
        <div class="input-group">
          <input type="text" class="full cc-number" placeholder="Card Number">
          <input type="text" class="expiry" placeholder="MM / YY">
          <input type="text" class="cvc" placeholder="CVC">
          <input type="checkbox" id="remember">
          <label for="remember">Remember me</label>
  <button id="go-btn" type="button" class="button--action button--circle">GO</button>
</div>
</div>
</div>
</label>

<input type="checkbox" id="agreement">
<label for="agreement">
    <div class="tab agreement">
      <h3 class="tab__title">Agreement<span class="fa fa-check"></h3>
      <div class="tab__content">
        <div class="agreement__text">
          <p>Kombucha offal kale chips semiotics, health goth shoreditch craft beer pickled occupy gentrify wayfarers franzen. Fanny pack crucifix jean shorts portland mumblecore chartreuse. Yr migas scenester, hoodie artisan fap chicharrones brunch ramps.
            Waistcoat venmo austin photo booth 90's affogato, viral craft beer readymade iPhone fashion axe. Cliche health goth cold-pressed cronut banjo selfies ennui synth locavore, etsy hoodie ethical. Synth everyday carry small batch, try-hard photo
            booth green juice tumblr farm-to-table normcore. Irony kinfolk fanny pack, beard scenester drinking vinegar asymmetrical man braid helvetica venmo chicharrones.
          </p>
        </div>
      </div>
    </div>
  </label>

<input type="checkbox" id="payment">
<label for="payment">
    <div class="tab payment">
      <h3 class="tab__title">Payment<span class="fa fa-check"></span></h3>
      <div class="tab__content">
        <span class="text-large">$32.00</span>
        <button type="button" class="button button--action">Pay Now</button>
      </div>
    </div>
  </label>

<input type="checkbox" id="confirmation">
<label for="confirmation">
    <div class="tab confirmation">
      <h3 class="tab__title">Confirmation<span class="fa fa-check"></h3>
      <div class="tab__content">
        <p>Confirm purchase?</p>
        <button type="submit" class="button button--action yes"><span class="fa fa-check"></span>Yes</button>
        <button type="button" class="button button--action no"><span class="fa fa-times"></span>No</button>
      </div>
  </label>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

＆＃13;

如何在按钮点击上展开下一部分？

3 个答案: