如何使多个、绝对定位、并排滑动面板选项卡可单击？
这是我的代码的示例。
<div id="wrapper1" style="width:300px">
<div id="panel1">
content
</div>
<div id="tab1">
<a>Tab 1</a>
</div>
</div>
<div id="wrapper2" style="width:200px">
<div id="panel2">
content
</div>
<div id="tab2">
<a>Tab 2</a>
</div>
</div>
面板在页面加载时 display:none; ，但选项卡可见。我在选项卡上使用 SlideToggle() 来打开/关闭面板。
问题是我希望选项卡在每个包装器中居中，但在面板折叠时间隔大约 10px。但由于两个包装器都是 position:absolute;，因此第二个选项卡位于第一个包装器“下方”，因为第一个包装器的宽度超过了第二个包装器。这显然给我留下了一个无法点击的第二个选项卡。有谁知道如何点击绝对定位的div的透明部分？在第一个包装器上使用 pointer-events:none; 不起作用，因为我还需要能够单击其选项卡。
Here's an example of my code.
<div id="wrapper1" style="width:300px">
<div id="panel1">
content
</div>
<div id="tab1">
<a>Tab 1</a>
</div>
</div>
<div id="wrapper2" style="width:200px">
<div id="panel2">
content
</div>
<div id="tab2">
<a>Tab 2</a>
</div>
</div>
The panels are display:none; on page load, but the tabs are visible. I'm using slideToggle() on the tabs to open/close the panels.
The problem is that I want the tabs centered in each wrapper but be spaced about 10px apart when the panels are collapsed. But since both wrappers are position:absolute; the second tab is "under" the first wrapper because the first wrapper's width goes over the second wrapper. This obviously leaves me with an unclickable second tab. Does anyone know how to click through the transparent part of an absolutely positioned div? It doesn't work to use pointer-events:none; on the first wrapper because I need to be able to click its tab as well.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您无法点击 div 的透明部分；无论是否透明，顶部的 div 都会收到点击。
You can't click through the transparent part of a div; transparent or not, the div on top will receive the click.