Question

我创建了一些可以按预期使用的标签，但是我试图使它们也与锚点一起使用

因此，每个选项卡上都有一个按钮，单击后应向下滚动到该选项卡并将其打开

锚点有效，但是我找不到打开选项卡的方法...

这是我正在尝试的代码：

//IF ANCHOR IS CLICKED
$(".product-icons .gen").click(function() {

  $(".tab_content").hide();

  var idName = $(this).attr('id');
  console.log(idName);

  if ($("ul.tabs li").find( idName)) {
    console.log( "found " + idName );

    var activeTab = $(this).attr("rel"); 

    $("#" + activeTab).fadeIn();    

    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");

    $(".tab_drawer_heading").removeClass("d_active");
    $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");


  }

Answer 1

这是您要实现的目标吗？

// The code that will be responsible for handling UI events.
var dispatchEvents = function() {
  // The relevant code that will be fired when 
  // accordions have been clicked. 
  var mobileClickEvent = function() {
    $(".tab_content").hide();
    $(".tab_drawer_heading").removeClass("d_active");
    $(this).addClass("d_active");
    $("#" + $(this).attr("rel")).fadeIn();
  };

  // The relevant code that will be fired when 
  // tabs have been clicked. 
  var desktopClickEvent = function() {
    $(".tab_content").hide();
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $("#" + $(this).attr("rel")).fadeIn();
  };

  // Some code that will be fired when the links 
  // at the top of the page are clicked. 
  var linkClickEvent = function() {
    $('.tabs_wrapper .' + $(this).attr('id')).click();
  };

  // Assign the events to the methods above.
  $("ul.tabs li").click(desktopClickEvent);
  $(".tab_drawer_heading").click(mobileClickEvent);
  $(".anchor .gen").click(linkClickEvent);
};

// Some code that runs on load, it's just a matter of 
// tweaking styles.
var updateStyles = function() {
  $(".tab_content").hide();
  $(".tab_content:first").show();
  $(".tab_container").css("min-height", function() {
    return $(".tabs").outerHeight() + 50;
  });
};

// Wait for the DOM to be ready, then do some magic. 
$(document).ready(function() {
  updateStyles();
  dispatchEvents();
});

.anchor {
  margin-bottom: 500px;
}

ul.tabs {
  display: table-cell;
  vertical-align: top;
  position: relative;
  z-index: 10;
  margin: 25px 0 0;
  padding: 20px 0;
  width: 23%;
  min-width: 230px;
  background-color: #00a652;
  list-style: none;
  -ms-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

ul.tabs li {
  margin: 0;
  cursor: pointer;
  padding: 0px 15px;
  line-height: 31px;
  color: white;
  padding: 10px 40px;
  font-weight: bold;
  background-color: #00a652;
  -ms-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

ul.tabs li:hover {
  background: #028e47;
  color: white;
  -ms-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

ul.tabs li.active {
  background: #028e47;
  color: white;
  -ms-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

ul.tabs h4 {
  color: #FFF;
  padding: 10px 40px;
}

.tab_container {
  display: table-cell;
  vertical-align: top;
  position: relative;
  left: 10px;
  z-index: 20;
  width: 66%;
  min-width: 10px;
  text-align: left;
  background: white;
}

.tab_content {
  padding: 20px 20px 50px;
  height: 100%;
  display: none;
}

.tab_content h2,
.tab_content h3,
.tab_content h4 {
  color: #028e47;
}

.tab_content h2 {
  margin: 15px 0 25px;
}

.tab_content p {
  margin: 0 0 25px;
}

.tab_drawer_heading {
  display: none;
}

@media screen and (max-width: 781px) {
  ul.tabs {
    display: none;
  }
  .tab_container {
    display: block;
    margin: 0 auto;
    left: 0px;
    width: 100%;
    border-top: none;
  }
  .tab_drawer_heading {
    background: #028e47;
    color: #fff;
    margin: 0;
    padding: 10px 20px;
    display: block;
    cursor: pointer;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 16px;
    line-height: 30px;
  }
  .tab_drawer_heading:hover {
    background: #028e47;
    color: white;
  }
  .d_active {
    background: #028e47;
    color: white;
  }
}

@media screen and (max-width: 800px) {
  ul.tabs li {
    position: relative;
  }
  .tab_drawer_heading:after {
    content: '\002b';
    /* Unicode character for "plus" sign (+) */
    font-size: 16px;
    color: #fff;
    float: right;
    margin-left: 5px;
  }
  .tab_drawer_heading.d_active:after {
    content: "\002d";
    /* Unicode character for "minus" sign (-) */
    font-size: 24px;
  }
}

@media (min-width: 703px) {
  /*.tab_container { padding: 0 40px;}*/
  ul.tabs li {
    position: relative;
  }
  ul.tabs li.active:after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    bottom: auto;
    margin-top: -13px;
    transform: translateX(0%);
    border-bottom: 13px solid transparent;
    border-top: 13px solid transparent;
    border-left: 10px solid #028e47;
  }
}

@media (min-width: 781px) {
  .tab_container {
    padding: 0 40px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="anchor">
  <a href="#gen" class="gen" id="tabOne">
    <div class="icon">Tab 1</div>
  </a>
  <a href="#gen" class="gen" id="tabTwo">
    <div class="icon">Tab 2</div>
  </a>
</div>

<div class="tabs_wrapper" id="gen">
  <ul class="tabs">
    <li rel="tab1" class="active tabOne">Tab 1</li>
    <li rel="tab2" class="tabTwo">Tab 2</li>
  </ul>
  <div class="tab_container">

    <h3 class="d_active tab_drawer_heading tabOne" rel="tab1">Title 1</h3>
    <div class="tab_content" id="tab1">
      <h2 rel="tab1">Title 1</h2>

      <p>Nunc dui velit, scelerisque eu placerat volutpat, dapibus eu nisi. Vivamus eleifend vestibulum odio non vulputate.</p>
    </div>

    <!-- #tab1 -->

    <h3 class="tab_drawer_heading tabTwo" rel="tab2">Title 2</h3>
    <div class="tab_content" id="tab2" rel="tab2">
      <h2>Title 2</h2>
      <p>Nunc dui velit, scelerisque eu placerat volutpat, dapibus eu nisi. Vivamus eleifend vestibulum odio non vulputate.</p>
    </div>
    <!-- #tab2 -->
  </div>

从定位按钮打开标签

1 个答案: