链接跳转到另一个页面引用并触发单击以显示无显示div

时间：2019-03-05 16:16:22

标签： javascript jquery html css

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

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

我在页面的右边有一个链接列表，就像菜单一样，当单击一个链接时，它会显示与其内容相对应的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>

非常感谢大家的帮助！

1 个答案:

答案 0 :(得分：0)

我认为您的$函数可能编写不正确，请尝试

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

  $('.privacyLink').click(function() {
    $('#Privacy-policy').trigger('click');
  });
});
相关问题
最新问题