调整选项卡内容和背景高度

Question

我有 2 个标签，它们位于带有背景图片的块上。根据单击哪个选项卡，选项卡的背景图像和选项卡内容面板应更改高度。通过CSS我做不到所以我想用JS来改变高度，但是没有用。

这是我的代码：

$('#two-tab').click(function() {
  $('.search-tabs').height('350px');
  $('#two-panel').height('272px')
});

.search-tabs {
  background-image: url('https://i.pinimg.com/originals/af/8d/63/af8d63a477078732b79ff9d9fc60873f.jpg')!important;
  background-position: center top!important;
  height: 281px!important;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-radio{
    display:none;
}
#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel{
   display:block
}
#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab{
  background:#F5A000;
  color:#000;
}

.tab-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}

.tab {
  cursor: pointer;
  width: 160px;
  padding: 5px 0px;
  margin: 0px 10px;
  background: #FFF;
  display: inline-block;
  text-align: center;
  color: #000;
  border-radius: 6px 6px 0px 0px;
  font-size: 13px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

.panels {
  height: 229px;
  width: 333px;
  position: relative;
  border-radius: 0px 0px 8px 8px;
  border-top: 3px solid #F5A000;
  background-color: rgba(255, 255, 255, 0.5);
}

.panel {
  display: none;
  animation: fadein .8s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="search-tabs">
  <div class="tab-wrapper">
  
    <input class="tab-radio" id="one" name="group" type="radio" checked>
    <input class="tab-radio" id="two" name="group" type="radio">
    
    <div class="tabs">
      <label class="tab" id="one-tab" for="one">Tab 1</label>
      <label class="tab" id="two-tab" for="two">Tab 2</label>
    </div>

    <div class="panels">
      <div class="panel" id="one-panel">
        Content for tab 1
      </div>
      <div class="panel" id="two-panel">
        Content for tab 2
      </div>
    </div>
    
  </div>
</div>

但这不起作用。有什么想法吗？

Answer 1

！！我添加了我自己的照片所以你可以用你想要的照片交换它。

！！这是你唯一需要的 JavaScript 代码，你写的那些行，我删除了它们

！！在 JavaScript 文件中添加此代码并删除您之前编写的代码。

这段代码将执行以下操作

如果您单击选项卡 2，它将更改所需元素的高度
如果您单击选项卡 1，它会将所有元素恢复到原来的形式。

ps：当您在编辑器中复制此代码时，右键单击显示并单击格式文档或只需单击 (shift + alt + f)

const searchContainer = document.querySelector(".search-tabs");

const panel = document.querySelector("#two-panel");

const tabOne = document.querySelector("#two-tab");
const tabTwo = document.querySelector("#one-tab");

let changingFunc = function(one, two) {
    searchContainer.style.height = `${one}`;
    panel.style.height = `${two}`;
};

const panelHeight = panel.offsetHeight;

tabOne.addEventListener("click", function() {
    changingFunc("350px", "272px");
});

tabTwo.addEventListener("click", function() {
    changingFunc("281px", `${panelHeight}px`);
});

Answer 2

您使用 !important 为 .search-tabs 定义了高度，这会覆盖您在点击处理程序中设置的高度。

调整选项卡内容和背景高度

Adjust tab content and background heights

html

javascript

css

jquery

tabs