1

JQueryを使用してテキストファイルのコンテンツをdivにロードしていますが、コンテンツがdivを超えるとスクロールバーが表示されません。

HTML:

<!DOCTYPE html> 
<html lang="en"> 
 <head> 
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <title></title> 
    <link rel="stylesheet" type="text/css" href="CSS/common.css">
    <script src="JS/common.js"></script>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
  </head>
  <body>
    <nav>
      <ul id="tabs">
        <li><a href="#" id="tab1" name="#tabContent1" class="activeTab">Home</a></li>
        <li><a href="#" id="tab2" name="#tabContent2">History</a></li>
        <li><a href="#" id="tab3" name="#tabContent3">The Circuit</a></li>
        <li><a href="#" id="tab4" name="#tabContent4">Gallery</a></li> 
        <li><a href="#" id="tab5" name="#tabContent5">Further Reading</a></li>    
      </ul>
    </nav>
    <div id="content">
      <div id="tabContent1"></div>
      <div id="tabContent2"></div>
      <div id="tabContent3"></div>
      <div id="tabContent4"></div>
      <div id="tabContent5"></div>
    </div>
  </body>
</html>

CSS:

body {
  background-color: #EEEEEE;
  font-family: Arial,Helvetica;
  font-size: small;
  height: 100%;
  margin: 100px auto 0;
  width: 100%;
}

#tabs {
  list-style: none outside none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  top: -98px;
  width: 100%;
}

#tabs li {
  float: left;
  margin: 0 -15px 0 0;

}
#tabs a {
  border-bottom: 30px solid #3D3D3D;
  border-right: 30px solid transparent;
  color: #FFFFFF;
  float: left;
  height: 0;
  line-height: 30px;
  opacity: 0.3;
  padding: 0 40px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
}

#tabs a:hover {
  border-bottom-color: #2AC7E1;
  opacity: 1;
}

#content {
  background: none repeat scroll 0 0 #FFFFFF;
  border-top: 2px solid #3D3D3D;
  height: 100%;
  padding: 2em;
  position: fixed;
  top: 30px;
  width: 98%;
  overflow: auto;
}

.activeTab {
  border-bottom-color: #3D3D3D !important;
  opacity: 1 !important;
}

.img {
}

JQuery:

$('a[name="#tabContent2"]').click(function () {
    $("#tab1").removeClass('activeTab');
    $("#tab3").removeClass('activeTab');
    $("#tab4").removeClass('activeTab');
    $("#tab5").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent2").load("external/test2.txt");
    $("#tabContent2").show();
    $("#tabContent1").hide();
    $("#tabContent3").hide();
    $("#tabContent4").hide();
    $("#tabContent5").hide();
  });

スクロールバーを表示するにはどうすればよいですか?

4

3 に答える 3

3 
#tabs {
  overflow: scroll;
}

overflowコンテンツを非表示にする方法を制御します。設定するhiddenと、スクロール バーなしで非表示になります。scroll適切なスクロール バーを追加します。

于 2013-02-12T18:25:54.417 に答える
1

オーバーフローは表示されますが、パディングによってオーバーフローしただけです。

#content {
  background: none repeat scroll 0 0 #FFFFFF;
  border-top: 2px solid #3D3D3D;
  height: 100%;
  padding: 2em 0 0 2em; /*<--change to this*/
  position: fixed;
  top: 30px;
  width: 98%;
  overflow: auto;
}
于 2013-02-12T18:34:09.847 に答える
0

代わりに有名なマイクロクリアフィックスを使用してみてくださいoverflow: auto;

/*The famous micro clearfix*/
.group:before,
.group:after,
.group:before,
.group:after {
        content: " ";
        display: table;
}

.group:after,
.group:after {
    clear: both;
}

.group,
.group {
    *zoom: 1;
}

そして、あなたのjQueryの場合、それは次のようにはるかに短くなり、議論の余地があり、より読みやすくなります。

$('a[name="#tabContent2"]').click(function () {
    $(this).parent().parent().find("a").removeClass("activeTab");
    $(this).addClass('activeTab');

    $("#content > div").hide();
    $("#tabContent2").load("external/test2.txt");
    $("#tabContent2").show();
});
于 2013-02-12T18:27:07.697 に答える