如何在JQuery中切换选项卡

How Do I Toggle Tabs in JQuery

本文关键字：选项 JQuery      更新时间：2024-01-29

我正在尝试创建一个选项卡式内容区域，用于打开和关闭每个部分。我的HTML如下：

<a href="" class="toggle"></a>
<div class="more-info">
    <p>HELLO</p>
</div>
<a href="" class="toggle"></a>
<div class="more-info">
    <p>GOODBYE</p>
</div>

JQuery是

    $("a.toggle").click(function () {
        $(this).find(".more-info").slideToggle("slow");
    });

我的风格是：

a.open {display:block; width:30px; height:30px; background:#999;}
.more-info {display:none; width:100%;}

这个想法是点击一个链接并打开它的内容框。我该怎么做？似乎不起作用？唯一的问题是，我不能使用唯一的ID作为创建页面的方式。因此，这必须在泛型类上工作。

您需要向下滑动所需的部分，向上滑动任何当前打开的部分。

尝试：

$("a.toggle").on('click', function (e) {
    e.preventDefault();
    var $section = $(this).next(".more-info").slideDown("slow");
    $(".more-info").not($section).slideUp("fast");
});

试试这个：

$("a.toggle").on('click', function (e) {
    e.preventDefault();
    var $a = $(this).next(".more-info");
    if($a.is(':visible')){
        $a.hide();
    }else{      
        $a.show();
    }
});

检查这个精心设计的切换效果

$('#ce-toggle').click(function(event) {
   $('.plan-toggle-wrap').toggleClass('active');
});
$('#ce-toggle').change(function(){
      if ($(this).is(':checked')) {
        $('.tab-content #yearly').hide();
        $('.tab-content #monthly').show();
      }
      else{
        $('.tab-content #yearly').show();
        $('.tab-content #monthly').hide();
      }
    });
body{
  margin:0;
}
.plan-toggle-wrap {
	text-align: center;
	padding: 10px;
	background-color: rgb(75,88,152);
  position:sticky;
  top:0;
}
.toggle-inner input {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 25px;
  right: 0;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}
.custom-toggle {
  position: absolute;
  height: 25px;
  width: 25px;
  background-color: #ffffff;
  top: 4px;
  left: 5px;
  border-radius: 50%;
  transition: 300ms all;
}
.toggle-inner .t-month, .toggle-inner .t-year {
  position: absolute;
  left: -70px;
  top: 5px;
  color: #ffffff;
  transition: 300ms all;
}
.toggle-inner .t-year {
  left: unset;
  right: -85px;
  opacity: 0.5;
}
.active > .toggle-inner .t-month {
  opacity: 0.5;
}
.active > .toggle-inner .t-year {
  opacity: 1;
}
.toggle-inner input:checked + span {
  left: 43px;
}
.toggle-inner {
  width: 75px;
  margin: 0 auto;
  height: 35px;
  border: 1px solid #ffffff;
  border-radius: 25px;
  position: relative;
}
.tab-content > div {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(94,110,191);
	color: #fff;
	height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="plan-toggle-wrap">
              <div class="toggle-inner">
                <input id="ce-toggle" type="checkbox">
                <span class="custom-toggle"></span>
                <span class="t-month">Yearly</span>
                <span class="t-year">Monthly</span>
              </div>
   </div>
<div class="tab-content">
  <div id="monthly">MONTHLY</div>
  <div id="yearly">YEARLY</div>
</div>

https://codepen.io/Vikaspatel/pen/yRQrpZ

相关文章：