javascript - Tab 在 Jquery 中消失了

Question

当我点击tab2时，内容区显示的链接应该会触发Tab3中的点击效果，可以，但是执行show()方法后tab3立即消失。我复制了这个例子中的代码，我不知道哪里错了。

http://codepen.io/anon/pen/hEpGK

有什么帮助吗？

$(document).ready(function() {
  $("#link").click(function() {
    $('a[rel="tab3"]').trigger("click");
  });
  $("#mtabs li").click(function() {
    $("#mtabs li").removeClass("active");
    $(this).addClass("active");
    $(".wrapper-content div").hide();
    var current = $(this).find("a").attr("href");
    $(current).show();
    return;
  });
});

.wrapper {
  width: 422px;
}
.clearfix {
  overflow: auto;
  zoom: 1;
}
#mtabs {
  width: 422px;
}
#mtabs ul li {
  float: left;
  list-style-type: none;
  margin: 0 10px;
  border: 1px solid #aaa;
  border-radius: 3px;
}
#mtabs ul li.active {
  background-color: #00f;
}
#mtabs ul li a {
  color: #aaa;
  text-decoration: none;
  padding: 10px;
}
.wrapper-content {
  height: 60px;
  width: 237px;
  margin: 10px;
  border: 1px solid #aaa;
}
.wrapper-content>div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper clearfix">
  <div id="mtabs">
    <ul>
      <li><a href="#tab1" rel="tab1">tab1</a>
      </li>
      <li><a href="#tab2" rel="tab2">tab2</a>
      </li>
      <li><a href="#tab3" rel="tab3">tab3</a>
      </li>
    </ul>
  </div>
</div>
<div class="wrapper-content">
  <div id="tab1">tab1</div>
  <div id="tab2"><a href="" id="link">go to tab3</a>
  </div>
  <div id="tab3">tab3</div>
</div>

Answer 1

你需要event.preventDefault();要停止事件的默认操作，请单击

第二种解决方案是更改 href=""至 href="#"以防止它在页面之外导航 <div id="tab2"><a href="#" id="link">go to tab3</a>

$(document).ready(function() {
  $("#link").click(function(event) {
    event.preventDefault();
    $('a[rel="tab3"]').trigger("click");
  });
  $("#mtabs li").click(function() {
    $("#mtabs li").removeClass("active");
    $(this).addClass("active");
    $(".wrapper-content div").hide();
    var current = $(this).find("a").attr("href");
    $(current).show();
    return;
  });
});

.wrapper {
  width: 422px;
}
.clearfix {
  overflow: auto;
  zoom: 1;
}
#mtabs {
  width: 422px;
}
#mtabs ul li {
  float: left;
  list-style-type: none;
  margin: 0 10px;
  border: 1px solid #aaa;
  border-radius: 3px;
}
#mtabs ul li.active {
  background-color: #00f;
}
#mtabs ul li a {
  color: #aaa;
  text-decoration: none;
  padding: 10px;
}
.wrapper-content {
  height: 60px;
  width: 237px;
  margin: 10px;
  border: 1px solid #aaa;
}
.wrapper-content>div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper clearfix">
  <div id="mtabs">
    <ul>
      <li><a href="#tab1" rel="tab1">tab1</a>
      </li>
      <li><a href="#tab2" rel="tab2">tab2</a>
      </li>
      <li><a href="#tab3" rel="tab3">tab3</a>
      </li>
    </ul>
  </div>
</div>
<div class="wrapper-content">
  <div id="tab1">tab1</div>
  <div id="tab2"><a href="" id="link">go to tab3</a>
  </div>
  <div id="tab3">tab3</div>
</div>