Javascript 如何使用按钮滑入不同的div_Javascript_Jquery_Html_Css

Javascript 如何使用按钮滑入不同的div

javascript jquery html css

Javascript 如何使用按钮滑入不同的div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,在我的代码中，我有两个面板。下面板有3个按钮，按下每个按钮必须在上面板中加载不同的数据假设我按下下面板上的按钮1，div编号1.1、1.2、1.3将滑入。如果我按下按钮2，就会加载div2.1，2.2，2.3，2.4 这是我的设置代码： .panel{ 宽度：300px；高度：100px；边框：1px纯黑； } .panel>.panelTop{ 宽度：100%；高度：49px；边框底部：1px黑色虚线； } .panel>.panelBottom{ 宽度：100%；高度：50px

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

假设我按下下面板上的按钮1，div编号1.1、1.2、1.3将滑入。如果我按下按钮2，就会加载div2.1，2.2，2.3，2.4

这是我的设置代码：

.panel{
宽度：300px；
高度：100px；
边框：1px纯黑；
}
.panel>.panelTop{
宽度：100%；
高度：49px；
边框底部：1px黑色虚线；
}
.panel>.panelBottom{
宽度：100%；
高度：50px；
}
.panel>.panelTop>div{
宽度：24px；
高度：24px；
浮动：对；
利润率：13px 9px 0；
边框：1px黑色虚线；
}
.panel>.panelBottom>div{
宽度：32px；
高度：32px；
浮动：对；
利润率：9px 9px 0；
边框：1px纯黑；
文本对齐：居中；
字体大小：22px；
}


从属按钮：
1.1
1.2
1.3
主要按钮：
1.
2.
3.

你需要这样的东西吗

编辑：

*你只需要做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>

您可以看到，每个

标签

标签在您的无线电输入类型的

id

中都有

for

attr

标签

标签“触发”您的无线电输入，使用CSS选择器，我们可以更改它们后面的div

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

这个CSS选择器表示单击后发生的事情，因此您可以随意更改它

输入[type=“radio”]：选中~div
-在选中无线电输入类型后获取每个div

我希望这个例子对你有所帮助。