jQuery选项卡内容增加重叠内容到底部div

时间:2013-08-29 07:53:35

标签: jquery html tabs

当标签内容增加高度时,由于内部内容与其底部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才能使我的标签框正常工作?

1 个答案:

答案 0 :(得分:0)

这是因为您的内容标签.tab-container的包装器具有height: 300px;。把它放到min-height: 300px;,它应该可以正常工作。

JsFiddle Test