javascript - 链接跳转到另一个页面引用并触发点击显示一个display none div

Question

我在实现我的目标时遇到了一些麻烦，

我有一个“帮助”页面，其中显示常见问题解答、隐私政策、使用条款等。

我在页面右侧有一个链接列表，就像一个菜单，单击一个链接时，它会显示与其内容对应的 div，并且一些“事件样式应用于菜单中的链接”

我使用了一些 jquery 来实现这一点，并且一切正常。现在唯一的问题是，例如在其他页面中，我有一个页脚显示一些有用的链接，如常见问题解答、隐私或使用条款。

当我点击其中一个时，它确实重定向到我的引用页面(帮助页面)但似乎没有显示内容，它停留在默认显示上。

我将向您展示我的功能，我已尝试处理此问题，但似乎仍然无法正常工作

<a class="termsLink" href="https://kefiga.com/faqtry/#Terms-and-conditions">terms</a>

<a class="privacyLink" href="https://kefiga.com/faqtry/#Privacy-policy">Privacy</a>



$('.termsLink').click(function(){
$(document).ready(function(){
$('#Terms-and-conditions').trigger('click');
  });
});

  $('.privacyLink').click(function(){
$(document).ready(function(){
$('#Privacy-policy').trigger('click');
  });
});

这是我在帮助页面上的代码片段

//HIDE AND SHOW DIVS

     $(document).ready(function() {  
                      
      $(".copen").click(function() {
  
         $(".c").hide();
 
         var cid = $(this).data("c");
         $("#"+cid).show();   
  
      });
  
   });
    
    //change menu links style
$(".toggleLinks").click(function(){
    // previously active
    $(".activeStyle").toggleClass("activeStyle inactiveStyle");
    $(this).toggleClass("activeStyle inactiveStyle");
});
    

.inactiveStyle{
    border:2px solid #0f2c41;
    color:#0f2c41;
    padding: 1em;
    margin-bottom:10%;
    width:60%;
    border-radius:5px;
    cursor:pointer;
    list-style: none;
    font-weight:600;
    font-size:1.1em;
    transition:0.4s;
    display:inherit;
    list-style: none;
    text-decoration: none;
}

.inactiveStyle:hover{
    color:#fff;
    background-color:#0f2c41;
    border:2px solid #0f2c41;
    padding: 1em;
    margin-bottom:10%;
    width:80%;
    border-radius:5px;
    cursor:pointer;
    list-style: none;
    font-weight:600;
    font-size:1.1em;
    transition:0.4s;
    text-decoration: none;
}

.activeStyle{
    color:#fff;
    background-color:#0f2c41;
    border:2px solid #0f2c41;
    padding: 1em;
    margin-bottom:10%;
    width:80%;
    border-radius:5px;
    cursor:pointer;
    list-style: none;
    font-weight:600;
    font-size:1.1em;
    transition:0.4s;
    display:inherit;
    text-decoration: none;
}

.menuListSide{
    list-style: none!important;  
}
.menuPage{
    top:15%!important;
    margin-left:2%!important;
    padding-top:5%;
}
       
.content{
    width:70%!important;
    padding-left: 25%;
    margin:auto;
}

#c1{
    text-align: center;
} 


#c5{
    text-align: justify;
}

.page-section{
    padding-top:15%;
}

body{
    height:100%;
}

#container{
    width:100%;
    word-break: break-word;
} 

#box{
    width:95%;
    margin:0 auto;
    box-sizing: border-box;
}
.menuPage{
    float:left;
    position:sticky;
    top:1%;
    margin-left:-2%;
      
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">

  <div id="box">  
      <div class="menuPage">
          <ul class="menuListSide">
              <li class="phoneInline1"><a id="a1"  href="#"class=" toggleLinks activeStyle copen" data-c="c1" data-d="d1">F.A.Q</a></li>   
             <li class="phoneInline1"><a id="a2" href="#"class=" toggleLinks inactiveStyle copen " data-c="c2" data-d="d2" >Size Guide</a></li>
              <li class="phoneInline2"><a id="a3" href="#" class="copen toggleLinks inactiveStyle" data-c="c3" data-d="d3">Delivery & Returns</a></li>
              <li class="phoneInline2"><a id="Privacy-policy" href="#" class="copen toggleLinks inactiveStyle" data-c="c4" data-d="d4">Privacy Policy</a></li>
              <li class="phoneInline3"><a id="Terms-and-conditions" href="#" class=" copen toggleLinks inactiveStyle" data-c="c5"data-d="d5">Terms & Conditions</a></li>
              <li class="phoneInline3"><a id="a6" href="#"class=" copen toggleLinks inactiveStyle" data-c="c6"data-d="d6">Copyright</a></li>
              <!--<li><a id="a7" href="#" class="  copen  toggleLinks inactiveStyle" data-c="c7"data-d="d7">Credits</a></li>-->
          </ul>
      </div>
      <div class="content">
              
        <div id="c1" class="c page-section">
          <h2>Content 1 / DEFAULT CONTENT </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>              


        </div> 
        <div id="c2" class="c page-section" style="display:none">
          <h2>Content 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

        </div>
        <div id="c3" class="c page-section" style="display:none">
          <h2>Content 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                                                 
        </div>
          
        <div id="c4" class="c page-section" style="display:none">
          <h2>Content 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

        </div>
        <div id="c5" class="c page-section" style="display:none">
          <h2>Content 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                                                 
        </div>
           <div id="c6" class="c page-section" style="display:none">
             <h2>Content 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                                                 
        </div>  
          
          
          
          
          
      </div>
    </div>
</div>

非常感谢大家的帮助!

Answer 1

我想可能是你的$函数写的不对，试试

$(document).ready(function() {
  $('.termsLink').click(function() {
    $('#Terms-and-conditions').trigger('click');
  });

  $('.privacyLink').click(function() {
    $('#Privacy-policy').trigger('click');
  });
});