内部コンテンツが下部 div に重なっているためにタブ コンテンツの高さが増加している場合に、jQuery タブ コンテンツ チェンジャーを作成しました。
<html>
<head>
<style>
.mid_content{height:auto;width:1070px;margin:auto;}
#footer{bottom:0;height: 50px;width: 100%;background-color: rgb(83,83,83);clear:both; margin: 50px 0 0 0; position:relative;}
tabs {
float:left;
height: 300px;
width: 300px;
margin: 10px 0 0 0;
}
div.active{
background:#999;
color:#333333;
}
div.tab_container div.active{
background-color:#FFF;}
/* di
v.tabs div.active{
} */
.tab_container {
float:right;
clear: both;
height:300px;
width: 700px;
background:#FFFFFF;
margin: 10px 0 0 0;
border-radius:5px;
}
p#con_tab{
text-align:left;
font-weight:bold;
color:#333333;
font-size:20px;
padding: 10px 0 0 10px;
font:"MS Serif", "New York", serif;
}
.tab_content {
height:290px;
width:690px;
display: none;
background-color:#FFF;
margin:auto;
margin-top:5px;
}
#tab1{height:auto;}
#tab2{height:auto;}
#tab3{height:auto;}
#tab4{height:auto;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("div.tabs div").click(function() {
$("div.tabs div").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>
</head>
<body>
<div class="mid_content">
<div class="tab_container">
<div id="tab1" class="tab_content active">
<p id="con_tab">We aim to provide committed healthcare services to all our patients through dedicated research and Committed Clinical Excellence & Successes.</p>
</div>
<div id="tab2" class="tab_content">
<p id="con_tab">Global Medi Consultants has committed itself to spread a healthy smile on all our clients faces.<br /> <br />All our clients are our family and we are committed to providing quality healthcare</p>
</div>
<div id="tab3" class="tab_content">
<p id="con_tab">Global Medi Consultants fill a very important void in the Medical travel domain and provide transparency in both quality of care and pricing.<br /> Our main goal is to provide a safe, affordable, and timely option to healthcare in house and across the globe for unavailable specialties.<br /> More specifically, to assist insured, uninsured, under-insured, or those stuck in long waiting lines to receive their medical treatments. <br /><br />Since long, we have been implementing an organized process of facilitation to our clients. In effect, they receive all the benefits of our knowledge and expertise we have gained over the years.</p>
</div>
<div id="tab4" class="tab_content">
<p id="con_tab">We are committed to the highest ethical, legal and professional standards and work with commitment.<br /> We conduct ourselves with honesty and integrity in our dealings with and on behalf of our clients.<br />
We are accountable for our conduct and for compliance with applicable laws.<br />
We treat everyone with respect and dignity, and make no distinction based on medical condition, age, gender, disability, race, color, religion, national origin or place of residence.<br />
We are committed to the ethical and compassionate treatment of patients and compliance with established policies and statements of patient rights.<br /> <br />
We use confidential information only to carry out our work and do not share such information with others unless duly instructed by the patient or required on behalf of the patient.<br /><br />
We place the interests of our patients above our own.
We deal with patients, payers, vendors, and providers with honesty and integrity.</p>
</div>
</div>
<div class="tabs">
<div class="active dash d_one" rel="tab1"><br /><h2>VISION</h2></div>
<div class="dash d_two" rel="tab2"><br /><h2>MISSION</h2></div>
<div class="dash d_three" rel="tab3"><h2>WHAT<br />WE DO</h2></div>
<div class="dash d_four" rel="tab4"><h2>CODE<br />OF <br />CONDUCT</h2></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
タブをクリックすると内容が変わるボックスです。4 番目の div を選択するとフッターに問題が発生します。フッターと重なっていますが、下の div を下にスクロールする必要があるかどうかにかかわらずページの高さを増やしていますが、下にスライドしていません。
私が作成した 4 つの div はタブです。タブのコンテンツは、タブのコンテンツをクリックして変更したときにそれに合わせて配置される div であり、最初の div はアクティブな div です。
私のフッターは、私のサイトの残りのページに共通です。タブ ボックスを正常に動作させるには、どの CSS または jQuery を追加すればよいですか?