jquery

Question

我想制作幻灯片，并且通过jquery计算该块的更改高度。当用户单击不同的选项卡时，相关内容会向下滑动，并且该块的高度会发生变化。（因为幻灯片覆盖了另一块事物，我必须将其设置为绝对值）问题是高度会在一段时间后发生变化我点击标签。我的意思是，当我点击第一个标签时，它不会移动。单击第二个时，设置第一个的高度。这是代码：

$('.home_zb_w635_ss li').unbind("click").click(function() {
  var bodyPaddingL = ($(document.body).width() - 1010) / 2;
  var $this = $(this);
  var id = $this.attr("data-code");
  if ($this.hasClass("home_zb_iconclick")) {
    $this.removeClass("home_zb_iconclick");
    $(".home_around_sj").hide();
    $(".home_around").slideUp();
    $('.main').height(310);
  } else {
    $(this).addClass("home_zb_iconclick").siblings().removeClass("home_zb_iconclick");
    $("[data-id].home_around_box").slideUp();
    $("[data-id=" + id + "].home_around_box").slideDown();
    $(".home_around").slideDown();
    $(".home_around_sj").show().css({
      left: $this.offset().left - bodyPaddingL + 32,
      top: 149
    });
    $('.main').height(310 + $('.main_965').height() + 31)
  }
});

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
fieldset,
lengend,
button,
input,
textarea,
th,
td {
  margin: 0;
  padding: 0
}
body,
button,
input,
select,
textarea {
  font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif
}
h1 {
  font-size: 18px
}
h2 {
  font-size: 16px
}
h3 {
  font-size: 14px
}
h4,
h5,
h6 {
  font-size: 100%
}
address,
cite,
dfn,
em,
var {
  font-style: normal
}
code,
kbd,
pre,
samp,
tt {
  font-family: "Courier New", Courier, monospace
}
small {
  font-size: 12px
}
ul,
ol {
  list-style: none
}
a {
  text-decoration: none
}
a:hover {
  text-decoration: underline
}
abbr[title],
acronym[title] {
  border-bottom: 1px dotted;
  cursor: help
}
q:before,
q:after {
  content: ''
}
legend {
  color: #000
}
fieldset,
img {
  border: 0
}
button,
input,
select,
textarea {
  font-size: 100%
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
hr {
  border: 0;
  height: 1px
}
html {
  overflow-y: scroll
}
.focus-wrap {
  position: relative;
  height: 466px;
  width: 100%;
  min-width: 1010px;
  background: #ddd;
}
.banner {
  min-width: 1010px;
  width: 100%;
  height: 466px;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: #CCC;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  position: absolute;
  line-height: 200px;
}
.main {
  width: 100%;
  position: relative;
  height: 310px;
}
.main-1010 {
  width: 1010px;
  margin: 0 auto;
  background: #0FF;
  position: relative;
  z-index: 99;
}
.qr_right li {
  width: 86px;
  float: left;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  width: 80px;
  height: 30px;
}
.home_around {
  background: #FFC;
  padding-bottom: 31px;
  border-top: 1px solid #ccc;
  display: none;
  overflow: hidden;
}
.home_around_box {
  padding: 5px 25px 0px;
  overflow: hidden;
  zoom: 1;
  line-height: 45px;
}
.home_around_sj {
  background: #FFC;
  width: 18px;
  height: 10px;
  position: absolute;
  z-index: 100;
}
.main_left {
  margin-top: 18px;
  width: 383px;
  float: left;
  line-height: 30px;
}
.botton_bu {
  width: 100%;
  height: 72px;
  text-align: center;
  clear: both;
  background: #F30;
  color:#fff;
  line-height:50px;
}
.footer {
  width: 100%;
  height: 600px;
  color: #dedede;
  background-color: #5f5f5f;
  margin-top: 30px;
  clear: both;
  text-align: center;
  line-height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="s8pc" style="width:100%; text-align:center; position:relative;">


  <div class="focus-wrap">
    <div class="banner">banner</div>
  </div>
  <div class="main">
    <div class="main-1010">
      <div class="main-po" style="position:absolute; top:-45px; left:0; width:1010px; z-index:100;">
        <div class="qr" style="background-color:#f0f0f0; width:100%; height:158px; z-index:100;">

          <div class="qr_right">click tabs to slide up contents
            <ul class="home_zb_w635_ss">
              <li data-code="airport"><a href="javascript:void(0)">tab1</a>
              </li>
              <li data-code="subway"><a href="javascript:void(0)">tab2</a>
              </li>
              <li data-code="business"><a href="javascript:void(0)">tab3</a>
              </li>
            </ul>
          </div>

        </div>
        <div class="home_around" style="display: none;">
          <div class="home_around_sj" style="display: block; left: 680px; top: 149px;"></div>
          <div class="main_965" data-id="ulall">
            <div class="home_around_box" data-id="airport" style="display: none;">
              <a pick="true" lt="1" mt="001" style="text-decoration: none" data-code="0" title="火车站">content</a>
            </div>
            <div class="home_around_box" data-id="subway" style="display: none;">
              <a pick="true" lt="1" mt="001" style="text-decoration: none" data-code="0" title="地铁13号线">content</a>
              <br />
              <a pick="true" lt="1" mt="001" style="text-decoration: none" data-code="1" title="地铁1号线">content</a>
            </div>
            <div class="home_around_box" data-id="business" style="display: none;">
              <a pick="true" lt="1" mt="001" style="text-decoration: none" data-code="0" title="大市场/批发市场">content</a>
              <br />
              <a pick="true" lt="1" mt="001" style="text-decoration: none" data-code="1" title="购物广场">content</a>
              <br />
              <a pick="true" lt="1" mt="001" style="text-decoration: none" data-code="2" title="商业街/步行街">content</a>
              <br />
              <a title="" lt="1" mt="001" style="text-decoration: none" class="" data-code="493">content</a>
            </div>
          </div>
        </div>

        <div class="main_left">HERE
          <br />WOULD
          <br />BE
          <br />TEXT</div>
        <div class="main_left">HERE
          <br />WOULD
          <br />BE
          <br />TEXT</div>
        <div class="botton_bu">These block of red things will cover up the footer part when sliding</div>
      </div>
    </div>
  </div>
</div>
<div class="footer">
  footer
</div>

我真的找不到问题，希望有人能帮忙，谢谢！