Question

我需要一些帮助。例如，当用户进入应用程序页面时。图标需要保持亮起状态。在图像中，我的光标悬停在它上面以给出效果。任何人都知道我想要实现的目标是否可行。

<ul class="mid-menu center-align">

        <li>
            <a class="bannernav-link " href="/<?php echo APP_URL . 'portal/account/'; ?>">
                <img class="bannernav-img nav-L" src="<?php echo THEME_IMG_PATH; ?>account.svg" alt="account page" />
                <img class="bannernav-img nav-M" src="<?php echo THEME_IMG_PATH; ?>mobile-account.png" alt="account page" />
                <span>My Account</span>
            </a>
        </li>

        <?php
        if ( THEME == 'stafforce_onlinereg' || THEME == 'stafforce_perm_portal' ) {
        ?>
            <li>
                <a class="bannernav-link " href="/<?php echo APP_URL . 'portal/details/'; ?>">
                    <img class="bannernav-img nav-L" src="<?php echo THEME_IMG_PATH; ?>profile.svg" alt="account page" />
                    <img class="bannernav-img nav-M" src="<?php echo THEME_IMG_PATH; ?>mobile-profile.png" alt="account page" />
                    <span>Candidate Profile</span>
                </a>
            </li>
        <?php
        } else {
        ?>
            <li>
                <a class="bannernav-link " href="/<?php echo APP_URL . 'portal/cvupload/'; ?>">
                    <img class="bannernav-img nav-L" src="<?php echo THEME_IMG_PATH; ?>profile.svg" alt="account page" />
                    <img class="bannernav-img nav-M" src="<?php echo THEME_IMG_PATH; ?>mobile-profile.png" alt="account page" />
                    <span>CV Upload</span>
                </a>
            </li>
        <?php
        }
        ?>

        <li>
            <a class="bannernav-link " href="/<?php echo APP_URL . 'portal/basket/'; ?>">
                <img class="bannernav-img nav-L" src="<?php echo THEME_IMG_PATH; ?>basket.svg" alt="account page" />
                <img class="bannernav-img nav-M" src="<?php echo THEME_IMG_PATH; ?>mobile-basket.png" alt="account page" />
                <span>Job Basket <?=$this->formatBasketCount($this->basketCount)?></span>
            </a>
        </li>
        <li>
            <a class="bannernav-link " href="/<?php echo APP_URL . 'portal/applications/'; ?>">
                <img class="bannernav-img nav-L" src="<?php echo THEME_IMG_PATH; ?>applications.svg" alt="account page" />
                <img class="bannernav-img nav-M" src="<?php echo THEME_IMG_PATH; ?>mobile-app.png" alt="account page" />
                <span>Application</span>
            </a>
        </li>
        <li>
            <a class="bannernav-link " href="/<?php echo APP_URL . 'portal/downloads/'; ?>">
                <img class="bannernav-img nav-L" src="<?php echo THEME_IMG_PATH; ?>downloads.svg" alt="account page" />
                <img class="bannernav-img nav-M" src="<?php echo THEME_IMG_PATH; ?>mobile-downloads.png" alt="account page" />
                <span>Downloads</span>
            </a>
        </li>
    </ul>

Answer 1

假设您的风格为color:white

您需要在与活动页面对应的图标上提供课程

然后再做

.activeTab {
  color: white;
}

单击后突出显示菜单

1 个答案: