javascript - 标签消失在jQuery中

当我单击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>

最佳答案

您需要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>