lundi 27 juin 2016

Carrying value from another page and doing .click


I have some tabs on a sub page that I would like to link to from another page. This is the 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>

The tab-content is opened with some basic jQuery:

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

What I would like to do is link to these tabs from another page, and have the jQuery add a .click() event to "open" the tab content and put the class .current on the corresponding li.

Here's the css and why add a hash won't work - by default it's display none:

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

I've tried piecing these things together with no luck. Do I need to carry a variable, or do something with ajax?


Aucun commentaire:

Enregistrer un commentaire