导航按钮保持/移动

Question

我正在尝试让最后两个导航按钮（"教育"和"联系人"）将社交媒体图标向左移动，然后停留在那里。

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

您正在添加一个额外的类来将社交图标移动到左侧的链接2"关注当前1链接2"。因此，当您单击然后jQuery添加此类时，但在同一时间页面刷新，然后"link2"类消失了。所以你需要的是通过PHP设置条件，如果页面是"联系我们"，则将类"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>

Answer 2

例如

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

一种方法是测试活动的当前页面，并在菜单中添加具有PHP条件的类。

它显示得非常好，因为肯定是您在单击链接时制作的 JS 脚本，然后它会加载页面。