Tab在Jquery中消失了

Question

当我点击tab2时，内容区域中显示的链接应该触发Tab3中的点击效果，它可以正常工作，但tab3在取消show（）方法后立即消失。 我复制了这个例子中的代码，我不知道我做错了什么。

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

任何帮助？

＆＃13;

＆＃13;

$(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;
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要event.preventDefault();来停止事件的默认操作，点击

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

＆＃13;

＆＃13;

$(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;
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;