Question

我正在为site处理具有jquery驱动标签内容的客户端。

链接到正确的页面很容易，但挑战是当你到达那里时打开正确的标签。在about页面上滚动到底部，然后单击 Move it 图标（带卡车的图标）。这会将您带到move it page。这很好，但我希望能够打开专业标签。

以下是链接到该页面的代码：

<li><a id="moveit" href="services_move_it.html">Move It</a></li>

我尝试了这个，但它无法正常工作

<li><a id="moveit" href="services_move_it.html#specialty">Move It</a></li>

以下是目标网页上标签的代码：

<div id="specialty-content" class="content">
   <p class="intro">Moving Simplified specializes in moving items such items as pool tables, pianos, antiques, and anything else you can throw at us.</p> 
   <div class="video-link">
    <a href="#">Watch the Move It Specialty Videos Now.</a>
   </div>
   <p>  Moving such items is more complicated than most would understand, and is an art form in itself.  We take pride in making sure that your priceless possessions are delivered damage free.  The employees sent to move your belongings are highly experienced in these types of items.  They will always  be well equipped to complete the move with the most up to date technology in the moving industry.</p><p> We will always pad and wrap each individual piece, as well as provide custom crates to ensure the safety of your pool table slate.</p>
   <div class="msg">
     <p><strong>Want to download the Move It Specialty guide?</strong> Go here <a href="#">now</a>.</p>
   </div>
</div>

以下是操作标签的jquery：

$(document).ready(function() {
/* this is for the tabbed content */
$("a.tab").click(function( evt ) {
    evt.preventDefault();
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(".content").slideUp();

    var content_show = $(this).attr("id");
    $("#" + content_show + '-content').slideDown();
});

因为我需要在多个链接/选项卡组合上执行此操作，我想找到一种系统的方法。

感谢您的帮助！

Answer 1

使用Ariel Flesler的jQuery插件以及标准的jQuery UI Tabs小部件很容易实现：

您可以在博客文章中找到详细的“如何”：

http://weblog.muledesign.com/2009/05/bookmarkable_tabs_with_jquery_ui.php

这种方法只需要很少的代码，并且可以在所有页面中进行推广。

首先，使用jQuery UI Tabs小部件设置标签。

在使用标签的网页上包含jQuery插件：

<script src="/javascripts/jquery.localscroll.js?1281125099" type="text/javascript"></script>
<script src="/javascripts/jquery.scrollTo.js?1281125099" type="text/javascript"></script>

然后添加此项（将“#tabs”替换为您正在使用的div）：

$(document).ready(function() {
  if($("#tabs") && document.location.hash){
    $.scrollTo("#tabs");
  }
  $("#tabs ul").localScroll({ 
    target:"#tabs",
    duration:0,
    hash:true
  });
});

就是这样！

Answer 2

我最近尝试构建自己的标签。我更改了代码以满足您的需求，但我不确定它是否有效：

确保链接的ID为与＃

之后的内容相同

var curtab = window.location.href; // Get the url
    curtab = curtab.split("#"); // Split the url at #
    curtab = "#" + curtab[1]; // Put the info after the # in a variable

    $("a.tab").each(function(i){ // Loop through all links and compare tab from url with value in link
        if(curtab == $(this).attr("href")){
            $(this).addClass("active"); // If they are the same, set that tab's class to active
        }
    });

$("a.tab").click(function(){ // Select tab
        $(".active").removeClass("active"); // Select the a, remove class for every link
        $(this).addClass("active"); // Select the clicked tab and add an active class
        var tabtocall = $(this).children().attr("href"); // Var to select current clicked tab
        $(".content").slideUp; // Slide up all content
        $(tabtocall).slideDown("normal"); // Slide down the selected content
    });

希望这有帮助！

修改

以下代码是根据您的结构将标签链接设置为有效（请参阅注释）。

$(".tabs a").each(function(i){ // Loop through all the links if(curtab == $(this).attr("id")){ // Compare the value from the url with the id $(this).addClass("active"); // If equal add class active } });

Answer 3

我需要JS代码来处理hashpart。看起来有点像这样。

handleHashPart = function(tabs) {
  var hashPart = window.location.hash;
  if (! hashPart || hashPart.length === 0) {
    return;
  }
  tabs.each(function() {
    var link = $(this);
    if (link.attr('href') == hashPart) {
      link.trigger('click');
      return false;
    }
    return true;
  });
};

handleHashPart($('a.tab'));

在附加处理程序后放置此项。现在您的链接应该可以正常工作。

Answer 4

$('.LinkSelector').click(function(){
   $( "#tabs" ).tabs("select", "#tabs-1" );
  });

上面的代码也很有帮助。

Answer 5

改进Rik的答案，这就是我使用bootstrap 4.0和JS为我的项目做的。

JS

number 10 twice

HTML

togglerPersonHandler = () => {
  const doesShow = this.state.showPerson;
  this.setState({
    showPerson: !doesShow
  });
}

如何获取打开页面上特定选项卡的链接？

5 个答案:

JS

HTML