[英]IFrame or Hidden Div is suitable for sliding content?
我不好解釋,所以請耐心等待一會兒。 我想提出一些意見。 請參閱我繪制的圖像,黑色邊框是固定的,不會改變。 我試圖實現的是通過單擊按鈕A / B / C來查找不同的內容。
1)A / B / C按鈕我應該使用哪種技術,因為我想讓箭頭粘到我單擊的按鈕上?我應該使用單選按鈕並使它像按鈕嗎? 這個技術叫什么?
2)藍色邊框是我的內容根據單擊按鈕而更改的地方。 我應該使用IFRAME還是應該使用DIV並將其隱藏?
我是網頁設計的新手。 嘗試學習盡可能多。
請參考圖片
如果您使用iframe,則需要花費一些時間來調用服務器和頁面加載,並且隨着請求的增加,它也不會保持高效,因此請使用jquery來顯示hide,這是我的一個示例
$(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代碼,是的,有一個onother css類用於水平表示。 非常隨機,如果發現錯誤,請原諒我
.checkbox_wrapper{float:left;margin:4px;}
<div class="checkbox_wrapper">
<input type="checkbox" id="chk_btn" />
<label></label>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.