如何使用href在标签之间切换？

Question

我在这里创建了一个标签式窗格 - LINK

在标签1中，我有一段文字。点击后，我希望它显示第二个标签。我已经尝试了#tab2，#mtabs#tab2等的所有变体，但似乎没有任何效果。

如何将其导航到第二个标签的内容？

HTML代码：

    

<div id="mtabs">
    <ul>
        <li><a href="#tab1" rel="tab1">Tab 1</a></li>
        <li><a href="#tab2" rel="tab2">Tab 2</a></li>
        <li><a href="#tab3" rel="tab3">Tab 3</a></li>
        <li class="active"><a href="#tab4" rel="tab4">Tab 4</a></li>
    </ul>
</div>

<div id="mtabs_content_container">
    <div id="tab1" class="mtab_content">
      <p><a href="#mtabs_wrapper#mtabs_content_container#tab2">Take me to Tab 2</a></p>
    </div>
    <div id="tab2" class="mtab_content">
        <p>Tab content 2</p>
    </div>
    <div id="tab3" class="mtab_content">
        <p>Tab content 3</p>
    </div>
<div id="tab4" class="mtab_content" style="display: block;">
  <p>Tab content 4</p>
    </div>

</div>
<!-- Original tabs END -->

CSS代码：

#mtabs_wrapper {
    width: 422px;
}
#mtabs_container {
    border-bottom: 1px solid #ccc;
}
#mtabs {
    list-style: none;
    padding: 5px 0 4px 0;
    margin: 0 0 0 0px;
    /* font: 0.75em arial; */
}
#mtabs li {
    display: inline;
}
#mtabs li a {
    border: 1px solid #ccc;
    padding: 4px 6px;
    text-decoration: none;
    color:#000;
    font-family: Artifika, serif; 
    background-color: #eeeeee;
    font-size:14px;
    /*border-bottom: 1px solid #ccc;
    outline: none;*/
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}
#mtabs li a:hover {
    background-color: #dddddd;
    padding: 4px 6px;
}
#mtabs li.active a {
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    padding: 4px 6px 5px 6px;
    /*border-bottom: none;*/
}
#mtabs li.active a:hover {
    background-color: #eeeeee;
    padding: 4px 6px 5px 6px;
    /*border-bottom: none;*/
}

#mtabs li a.icon_accept {
    background-image: url(accept.png);
    background-position: 5px;
    background-repeat: no-repeat;
    padding-left: 24px;
}
#mtabs li a.icon_accept:hover {
    padding-left: 24px;
}

#mtabs_content_container {
    border: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    width: 600px;
}
.mtab_content {
    display: none;
}

/* TAB CSS END */

Javascript（实际上是jQuery）：

$(document).ready(function(){
    //  When user clicks on tab, this code will be executed
    $("#mtabs li").click(function() {
        //  First remove class "active" from currently active tab
        $("#mtabs li").removeClass('active');

        //  Now add class "active" to the selected/clicked tab
        $(this).addClass("active");

        //  Hide all tab content
        $(".mtab_content").hide();

        //  Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");

        //  Show the selected tab content
        $(selected_tab).fadeIn();

        //  At the end, we add return false so that the click on the link is not executed
        return false;
    });
});

Answer 1

如果您不想使用外部库，可以使用它。 向链接添加标识符并添加单击事件并模拟首选选项卡上的单击。 这样做是不切实际的。 但只有在您不想使用库

时才可以选择

<a id="simulate">Take me to Tab 2</a>

看看这个例子。

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

Answer 2

您需要使用Javascript并利用tabs API。

HTML：

<a href="#" class="show_tab_2">Take me to Tab 2</a>

使用Javascript：

$("a.show_tap_2").click(function() {
  $('#mtabs_wrapper').tabs({
    active: 2
  });
});

Answer 3

您是否要在网址中发送包含哈希的链接，并显示该标签？

喜欢 - http://jsbin.com/mawevuwi/1#tab4

为此我们会做这样的事情：

<强> CSS：

.tabs > div { display:none; }
.tabs > div.active { display:block; }

设置 html /（如果你喜欢的话，请使用<li>）

<!-- links -->
<a href="#tab1">Tab1</a>
<a href="#tab2">Tab2</a>
<a href="#tab3">Tab3</a>
<a href="#tab4">Tab4</a>

<!-- content -->
<div class="tabs">
  <div id="tab1"> Tab one content </div>
  <div id="tab2"> Tab Two content </div>
  <div id="tab3"> 
       Tab Three content with a <a href="#tab1">link to tab 1</a>
  </div>
  <div id="tab4"> Tab Four content </div>
</div>

使用jQuery

var $tabs = $('.tabs > div'), _currhash, $currTab;

function showTab() {
   if($currTab.length>0) {  
     $tabs.removeClass('active');
     $currTab.addClass('active');
   }
}
/* find the tabs and 'unlink' the id to prevent page jump */
$tabs.each(function() {
   var _id = $(this).attr('id');
   $(this).attr('id',_id+'_tab');
   /* eg we have given the tab an id of 'tab1_tab' */
});

/* set up an anchor 'watch' for the panels */
function anchorWatch() {
  if(document.location.hash.length>0) {
    /* only run if 'hash' has changed */
    if(_currhash!==document.location.hash) {
       _currhash = document.location.hash;
       /* we only want to match the 'unlinked' id's */
       $currTab = $(_currhash+'_tab');
       showTab();
   }
  }
} 
setInterval(anchorWatch,300);

---

• 我们可以拥有不错的网址/somepage#tab1，可以将这些网址作为电子邮件等链接发送。
• html是'as designed'（命名为内容id的锚点）
• 使用类来执行/ show / hide，因此我们可以根据需要在.active类上设置CSS动画。

---

http://jsbin.com/dowemeve/1/edit

Answer 4

使用bootstrap的data-toggle =“ tab”，并在href中使用元素＃id，tab2类应为Tab-pane

html {
overflow: hidden; 
  width: 1470px;
  height: 450px;
  margin-top: -3px;
  margin-left: 5px;
}
.row {
  display: flex;
}

.column {
  flex: 50%;
}

.profile {
  padding: 0px;
  margin: 100px 70px 0px 0px;
  width: 50%;
  height: 25px;
  box-sizing: border-box;
  color:#161b7a;
}

.profile .name {

  margin-right: -260px;
  font-family: "Helvetica";
  font-weight: 600;
  src: url(helveticaneue-ultrathin.woff);
  float: right;
  width: 200px;
  height: 50px;
}

.profile .job {


  margin-right: -260px;
  margin-top: 25px;
  font-family: "Helvetica";
  font-weight: 100;
  font-size: 14px;
  color: #b69cd1;
  src: url(helveticaneue-ultrathin.woff);
  float: right;
  width: 200px;
  height: 50px;
}


.profile .count {
  float: right;
  margin-right: 60px;
  margin-top: -2px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  src: url(helveticaneue-ultrathin.woff);
  color: #E6E0EC;
  font-size: 21px;
  min-width: 76px;
}

.profile img.profilePic {
  position: absolute;
  margin: -50px 70px 50px 50px;
  background: #2f293d;
  border: 4px solid #2f293d;
  padding: 1px;
  border-radius: 50%;
  box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}

.profile img.profileDia {
  position: absolute;
  margin: -7px 70px 50px 560px;
  width: 2.3%;
  height: auto;
}




.points {
  position: absolute;
  margin: -2px 100px 100px 490px;
  float: right;
  font-family: "Verdana";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #0047ba;
  font-size: 18px;
}

.level {
  position: absolute;
  margin: 25px 100px 100px 135px;
  float: right;
  font-family: "Helvetica";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #ed0909;
  font-size: 20px;

  display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;

    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */

    background-color: #2c094f;
    color: white;
    text-align: center;
    font-size: 1.3em;
}



.profile img.profilePic.custom-borderA {
   border: 5px dotted #ff2100

}

Answer 5

试试这个 如果你有

<a id="goTab2" href="">Take me to Tab 2</a>

在jquery中你可以做到这一点

$("#goTab2").click(function(){
$("#mtabs li:nth-child(2)").click();
return false;
 });