Question

在我的代码中，我有2个面板。下面板有3个按钮，按下每个按钮必须在上面板中加载不同的数据。

所以，如果我按下面板中的按钮1，则div数字1.1,1.2,1.3将滑入。如果我按下按钮2，则会加载div 2.1,2.2,2.3,2.4。

以下是我的设置代码： DEMO

.panel {
  width: 300px;
  height: 100px;
  border: 1px solid black;
}
.panel > .panelTop {
  width: 100%;
  height: 49px;
  border-bottom: 1px dashed black;
}
.panel > .panelBottom {
  width: 100%;
  height: 50px;
}
.panel > .panelTop > div {
  width: 24px;
  height: 24px;
  float: right;
  margin: 13px 9px 0 0;
  border: 1px dashed black;
}
.panel > .panelBottom > div {
  width: 32px;
  height: 32px;
  float: right;
  margin: 9px 9px 0 0;
  border: 1px solid black;
  text-align: center;
  font-size: 22px;
}

<div class="panel">
  <div class="panelTop">
    Dependant Buttons:
    <!-- Side1 -->
    <div>1.1</div>
    <div>1.2</div>
    <div>1.3</div>

    <!-- Side2
    <div>2.1</div>
    <div>2.2</div>
    <div>2.3</div> -->

    <!-- Side3 
    <div>3.1</div>
    <div>3.2</div>
    <div>3.3</div> -->
  </div>
  <div class="panelBottom">
    Main Buttons:
    <div class="btn1">1</div>
    <div class="btn2">2</div>
    <div class="btn3">3</div>
  </div>
</div>

每个div都有自己独特的类，所以我不确定我是否可以使用jQuery中的数组或CSS中的visibility: hidden来实现它。

有什么想法吗？！

Answer 1

你需要这样的东西吗？

编辑： Fiddle

*只有你需要做的是CSS“操纵”（根本没有JS ）。

我写这个：

<强> HTML

<div class="panel">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input id="box-1" name="trigger" type="radio">
      <div>1.1</div>
      <div>1.2</div>
      <div>1.3</div>
    </div>
    <div>
      <input id="box-2" name="trigger" type="radio">
      <div>2.1</div>
      <div>2.2</div>
      <div>2.3</div>
    </div>
    <div>
      <input id="box-3" name="trigger" type="radio">
      <div>3.1</div>
      <div>3.2</div>
      <div>3.3</div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label for="box-1" class="btn1">1</label>
    <label for="box-2" class="btn2">2</label>
    <label for="box-3" class="btn3">3</label>
  </div>
</div>

<强> CSS

input[type="radio"]{
  position: absolute;
  opacity: 0;
}

.panelTop > div {
  position: absolute;
  top: 15px;
  right: 0;
}

.panelTop > div div {
  opacity: 0;
  transition: ease .3s;
  transform: translate(-150%, 0)
}

.panelTop > div input[type="radio"]:checked ~ div {
   opacity: 1;
   transform: translate(0%, 0)
}

.panel {
  width: 400px;
  height: 100px;
  border: 1px solid black;
}

.panel > .panelTop {
  position: relative;
  width: 100%;
  height: 49px;
  border-bottom: 1px dashed black;
}

.panel > .panelBottom {
  width: 100%;
  height: 50px;
}

.panel > .panelTop > div div {
  width: 24px;
  height: 24px;
  float: right;
  margin: 0px 9px 0 0;
  border: 1px dashed black;
}

.panel > .panelBottom > div {
  width: 32px;
  height: 32px;
  float: right;
  margin: 9px 9px 0 0;
  border: 1px solid black;
  text-align: center;
  font-size: 22px;
}

您可以看到每个label标记在您的广播输入类型的for内都有id attr。

label代码“触发”您的无线电输入，使用 CSS 选择器，我们可以更改它们之后的div。

.panelTop > div input[type="radio"]:checked ~ div

此 CSS 选择器表示点击后会发生什么，因此您可以随意更改。

input[type="radio"]:checked ~ div - 在检查无线电输入类型后获取每个div。

我希望这个例子可以帮助你。

Answer 2

我在@zeev katz代码中做了一些更新。

fiddle

$(document).ready(function() {
  $("input").click(function() {
  $(this).parent().siblings().find("input").prop("checked", false);l
});

}）;

回顾一下。希望你会喜欢它:)）

如何使用按钮在不同的div中滑动

2 个答案: