导航按钮停留/移动

Question

我正在尝试使用最后两个导航按钮（"Education" 和 "Contact"）将社交媒体图标移到左侧，然后停留在那里。

http://comms101.co.za/populus/index.php#

出于某种原因，点击后它立即正确显示，但随后社交媒体图标恢复原状。如果您再次单击该按钮，它就会正确显示（应该如何显示）。

导航是一个 php 包含。这是代码：

        <div class="row">
                <div class="col-lg-5 col-md-5">
                    <div class="logo"><a href="#"><img src="imgs/logo.png" alt="logo"></a></div>
                </div>
                <div class="col-lg-7 col-md-7 mn">
                    <div class="follow current1" style=""> <a href="#"><img src="imgs/f.png" alt=""></a> <a href="#"><img src="imgs/int.png" alt=""></a> <a href="#"><img src="imgs/in.png" alt=""></a> </div>
                    <div id="menu-icon">
                    <div class="menu-icn"><span></span><span></span><span></span></div>
                    </div>

                    <div class="menu" id="menu">
                    <ul id="links">
                        <li class="link"><a href="index.php">HOME</a></li>
                     <li class="link"><a href="about.php">ABOUT</a></li>
                     <li class="link"><a href="resources.php">RESOURCES</a></li>
                        <li class="link"><a href="training.php">TRAINING</a></li>
                        <li class="link"><a href="coaching.php">COACHING</a></li>
                        <li class="folow current1 current"><a href="education.php">EDUCATION</a></li>
                        <li class="folow1 current2 link"><a href="contact.php">CONTACT</a></li>
                    </ul>
                 </div>
            </div>

Answer 1

例如，当您加载教育页面时，.link1 class 必须在此处。

一种方法是测试当前活动页面并在菜单中添加 class 和 PHP 条件。

它显示得很好，因为肯定是您在单击 link 时创建的 JS 脚本，然后它加载了页面。

Answer 2

您正在添加一个额外的 class 以将社交图标移到那个链接的左侧2 "follow current1 link2"。所以当你点击然后 jquery 添加这个 class 但在同一时间页面刷新然后 "link2" class 消失了。所以你需要的是通过php设置条件，如果页面是联系我们然后添加 class "link2" 到这个 div.

<div class="follow current1 link2"> 
  <a href="#"><img src="imgs/f.png" alt=""></a> 
  <a href="#"><img src="imgs/int.png" alt=""></a> 
  <a href="#"><img src="imgs/in.png" alt=""></a> 
</div>

导航按钮停留/移动

Navigation buttons stay / shift

css

navigation