从外部链接（从页面）打开页面上的特定选项卡

Question

这个问题已经被问过几次了。我已经尝试了所有关于这个问题的代码 sn-ps，但我的代码似乎没有任何效果。以下是我如何布置页面元素的要点：

1) 我有一个在页面上创建的垂直选项卡式产品列表（例如：Conveyors.html）

2) 选项卡/产品有自己的 id。单击同一页面中的选项卡或选项卡链接（即 Conveyors.html。）时，将打开特定选项卡。

3) 我有一个主产品页面 (Products.html)，其中包含所有子产品的链接。

<a href="Conveyors.html#screw-content">

4) 单击 Products.html 上的特定链接以打开 Conveyors.html 上的特定选项卡时，我被重定向到该页面，但该选项卡未打开。

如何在从不同页面访问时打开特定选项卡。

a) 引导方法不起作用

b) 选项卡不是使用 Jquery UI 选项卡创建的。

请帮我解决这个问题。谢谢！

Answer 1

1) 准备好写入 Dom

window.location.hash

这会给你#screw-content

2) 根据找到的 hash (#) 值创建条件并应用点击/任何操作以打开 Tab。

这会解决你的问题。

Answer 2

主页上的 HTML：

<li class='has-sub'><a href='Products.html'><span>Products</span></a>
 <ul>
     <li class='has-sub'><a href='Conveyors.html'><span>Converyors</span></a>
         <ul>
             <li><a href="Conveyors.html#screwcon-content"><span>Screw Conveyors</span></a></li>
             <li><a href="Conveyors.html#beltcon-content"><span>Belt Conveyors</span></a></li>
             <li><a href="Conveyors.html#idler-content"><span>Idler Rollers</span></a></li>
             <li class='last'><a href="Conveyors.html#rollerpulley-content"><span>Rollers and Pulleys</span></a></li>
          </ul>
        </li>
   <li class='has-sub'><a href='BucketElevators.html'><span>Bucket Elevators</span></a>
                                <ul>
                                   <li><a href='BucketElevators.html#beltbucket-content'><span>Belt Type</span></a></li>
                                   <li class='last'><a href='BucketElevators.html#chainbucket-content'><span>Chain Type</span></a></li>
                                </ul>
                            </li>
                            <li class='has-sub'><a href='OtherProducts.html'><span>Other Products</span></a>
                                <ul>
                                    <li><a href='OtherProducts.html#grindingmills-content'><span>Grinding Mills</span></a></li>
                                    <li><a href='OtherProducts.html#feeders&screens-content'><span>Feeders & Screens</span></a></li>
                                    <li><a href='OtherProducts.html#crushers-content'><span>Crushers</span></a></li>
                                    <li><a href='OtherProducts.html#kilns-content'><span>Kilns</span></a></li>
                                    <li><a href='OtherProducts.html#airslides-content'><span>Air Slides</span></a></li>
                                    <li class='last'><a href='OtherProducts.html#classifier-content'><span>Classifier</span></a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>


Html for Conveyors.html
<div id="products-verticalbar">
        <h1> Conveyors </h1>
        <ul id="sidemenu"> 
            <li> <a href="#screwcon-content" class="open">Screw Conveyors</a> </li>
            <li> <a href="#beltcon-content" id="tab1">Belt Conveyors</a> </li>
            <li> <a href="#idler-content">Idler Rollers</a> </li>
            <li> <a href="#rollerpulley-content">Rollers and Pulleys</a> </li>
        </ul>

        <div id="conveyor-content">
            <div id="screwcon-content" class="contentblock">

            <p>A screw conveyor or auger conveyor is a mechanism that uses a rotating helical screw blade, called a "flighting", usually within a tube, to move liquid or granular materials. They are used in many bulk handling industries. Screw conveyors in modern industry are often used horizontally or at a slight incline as an efficient way to move semi-solid materials, including food waste, wood chips, aggregates, cereal grains, animal feed, boiler ash, meat and bone meal, municipal solid waste, and many others. The first type of screw conveyor was the Archimedes' screw, used since ancient times to pump irrigation water.</p>
            <img src="IMAGES/Screwcon.jpg"/>
            </div>

            <div id="beltcon-content" class="contentblock hidden">
            <p>A conveyor belt is the carrying medium of a belt conveyor system (often shortened to belt conveyor). A belt conveyor system is one of many types of conveyor systems. A belt conveyor system consists of two or more pulleys (sometimes referred to as drums), with an endless loop of carrying medium—the conveyor belt—that rotates about them. One or both of the pulleys are powered, moving the belt and the material on the belt forward. The powered pulley is called the drive pulley while the unpowered pulley is called the idler pulley. There are two main industrial classes of belt conveyors; Those in general material handling such as those moving boxes along inside a factory and bulk material handling such as those used to transport large volumes of resources and agricultural materials, such as grain, salt, coal, ore, sand, overburden and more.</p>
            <img src="IMAGES/beltconveyor.jpg"/> 
            </div>
            <div id="idler-content" class="contentblock hidden"> </div>
            <div id="rollerpulley-content" class="contentblock hidden"> </div>
        </div>
    </div>  

Script:
$(function(){
  $('#sidemenu a').on('click', function(e){
    e.preventDefault();

    if($(this).hasClass('open')) {
      // do nothing because the link is already open
    } else {
      var oldcontent = $('#sidemenu a.open').attr('href');
      var newcontent = $(this).attr('href');

      $(oldcontent).fadeOut('fast', function(){
        $(newcontent).fadeIn().removeClass('hidden');
        $(oldcontent).addClass('hidden');
      });


      $('#sidemenu a').removeClass('open');
      $(this).addClass('open');
    }
  });
});

Answer 3

$(function(){
  hashValue = window.location.hash;

  if(hasValue!=undefined && hashValue!="")
    {
      $('#sidemenu a[href="'+hashValue +'"]').click();
    }
  
  $('#sidemenu a').on('click', function(e){
    e.preventDefault();       

    if($(this).hasClass('open')) {
      // do nothing because the link is already open
    } else {
      var oldcontent = $('#sidemenu a.open').attr('href');
      var newcontent = $(this).attr('href');

      $(oldcontent).fadeOut('fast', function(){
        $(newcontent).fadeIn().removeClass('hidden');
        $(oldcontent).addClass('hidden');
      });


      $('#sidemenu a').removeClass('open');
      $(this).addClass('open');
    }
  });
});