我不善于解释,所以忍受我一会儿。
我想问一些意见。参考我绘制的图像,黑色边框是固定的,不会改变。我想要实现的是点击按钮A / B / C将查看不同的内容
1)A / B / C按钮我应该使用什么技术,因为我想要一个箭头坚持按钮我点击。我应该使用单选按钮,使它像按钮?这种技术叫什么?
2)蓝色边框是我的内容将根据按钮单击更改的位置。
我应该使用IFRAME还是应该使用DIV并隐藏它?
我是网页设计的新手。尽可能多地学习。
请参考图片
答案 0 :(得分:0)
如果你使用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>