从另一个页面携带价值并执行.click

时间:2016-06-26 14:23:39

标签: javascript jquery

我在子页面上有一些标签,我想从另一个页面链接到该页面。这是html:

<div id="tabs-container">
    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1"</a></li>
        <li><a href="#tab-2"></a></li>
        <li><a href="#tab-3"></a></li>
    </ul>
    <div class="tab">
        <div id="tab-1" class="tab-content"></div>
        <div id="tab-2" class="tab-content"></div>
        <div id="tab-3" class="tab-content"></div>
   </div>

使用一些基本的jQuery打开tab-content:

   $(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
});

我想要做的是从另一个页面链接到这些标签,并让jQuery将一个.click()事件添加到&#34;打开&#34;选项卡内容并将类.current放在相应的li上。

这里有css以及为什么添加哈希不会工作 - 默认情况下它不显示:

    .tabs-menu {height: 60px;}
.tabs-menu li {
  height: 60px;
  line-height: 66px;
  display: inline-block;
  margin-right: 10px;
  list-style-type: none;
  background: #EFEFEF;
  padding: 10px;
  border-radius: 3px;
  width: 20.5%;
  text-align: center;
  margin: 0 1%;
}
.tabs-menu li.current {
  position: relative;
  background-color: orange;
  z-index: 5;
}
.tabs-menu li.current a {
  color: #FFFFFF;
}
.tabs-menu li a {
  display: block;
  color: red;
  text-decoration: none;
}

.tab {
  background-color: #DDD;
  float: left;
  margin-bottom: 20px;
  width: auto;
}

.tab-content {
  padding: 20px;
  display: none;
  text-align: center;
}

#tab-1 {
  display: block;
}

我试过拼凑这些东西,没有运气。我是否需要携带变量,或者使用ajax做什么?

0 个答案:

没有答案