IFrame 或 Hidden Div 适合滑动内容？

Question

我不擅长解释，所以请耐心等待。 我想请教一些意见。参考我绘制的图像，黑色边框是固定的，不会改变。我想要实现的是通过单击按钮 A/B/C 来查看不同的内容。
1）A / B / C按钮我应该使用什么技术，因为我想要一个箭头粘在我点击的按钮上。我应该使用单选按钮并让它像按钮吗？这种技术叫什么？
2）蓝色边框是我的内容将根据按钮单击而改变的地方。 我应该使用 IFRAME 还是应该使用 DIV 并隐藏它？

我是网页设计新手。尽可能多地学习。

请参考图片

Answer 1

如果您使用 iframe，调用服务器和页面加载将需要时间，并且随着请求的增加，因此它也不会保持高效使用 jquery 显示隐藏这里是我的一个示例

$(function(){
    $('.tabbox_1').show();
    $('.tab').click(function(){
        var tabid = $(this).attr('id').replace('tab_','');
        $('.tab').removeClass('active');
        $(this).addClass('active');
        if($('.tabbox_'+tabid).is(':visible')){
             $('.tabbox').hide();
        }
        $('.tabbox_'+tabid).fadeIn();

    });

});

然后就是div的html代码

<div>
    <ul class="tabpan">
        <li class="tab" id="tab_1">One</li>
        <li class="tab" id="tab_2">One</li>
        <li class="tab" id="tab_3">One</li>
    </ul>
    <div>
         <div class="tabbox tabbox_1">
              tab 1 content
         </div>
         <div class="tabbox tabbox_2">
              tab 2 content
         </div>
         <div class="tabbox tabbox_3">
              tab 3 content
         </div>
</div>

别忘了风格

<style>
.tabbox{display:none}
.tabpan li{float:left;padding:5px;background:#ddd;color:#fff;font-weight:bold;border:1px solid #ddd}
.tabpan .active{background:#fff;color:#ddd;border:1px solid #ddd}
</style>

希望这对你有用

如果您仍然想坚持使用 iframe 和单选按钮，有一个 css 代码，我已经尝试使用两个图像，它可以工作，您可以在检查单选按钮时更改该背景图像

.checkbox_wrapper{position: relative;width:45px;height:101px;margin:10px auto;}
.checkbox_wrapper input[type="checkbox"] {opacity:0;width:45px;height:101px;position: absolute;top: 0;left: 0;z-index: 2;}
.checkbox_wrapper input[type="checkbox"] + label{background:url('../imgs/off.png') no-repeat;width:45px;height:101px;display:inline-block;padding: 0 0 0 0px;position: absolute;top: 0;left: 0;z-index: 1;}
.checkbox_wrapper input[type="checkbox"]:checked + label{background:url('../imgs/onn.png') no-repeat;width:45px;height:101px;display:inline-block;padding: 0 0 0 0px;}

这是使用您的图像进行检查和取消检查的 html 代码，是的，还有一个用于水平表示的另一个 css 类。非常随意，如有错误请见谅

.checkbox_wrapper{float:left;margin:4px;}
<div class="checkbox_wrapper">
        <input type="checkbox" id="chk_btn" />
        <label></label>
    </div>