点击li元素时添加左侧边框并修改背景色：左侧边框不生效的问题排查

Hey there! I notice two key problems with your code that are causing the border not to work as expected, plus a small logic flaw in the click handling. Let's break it down and fix it step by step:

1. The Click Logic Bug #

Right now, your JavaScript adds the active class to all <li> elements when any single one is clicked. That's probably not what you want—you should only activate the specific li that was clicked. To fix this, first remove the active class from all li elements, then add it to the clicked one:

Updated JavaScript #

window.addEventListener('load', function () {
    $('li').click(function () {
        // Reset all li elements first
        $('li').removeClass('active');
        // Activate the clicked li
        $(this).addClass('active');
    });
})

2. CSS Priority Issue (Why the Border Isn't Showing) #

Even though your active class sets a new border, the original li selector's border is conflicting with it. While class selectors have higher priority than element selectors, using a more specific selector ensures your styles override the default. Switch to li.active instead of just .active to boost the selector's priority:

Updated CSS #

li {
    background-color: grey;
    border-left: 3px solid blue;
    /* Add some padding to make the border and content look nicer */
    padding: 8px 12px;
    /* Remove default list bullet points */
    list-style: none;
}

/* More specific selector to guarantee style precedence */
li.active {
    background-color: blue;
    border-left: 4px solid red;
    /* Optional: Change text color for better contrast on the blue background */
    color: white;
}

Your HTML (Unchanged) #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <ul>
        <li><span>Option 1</span></li>
        <li><span>Option 2</span></li>
        <li><span>Option 3</span></li>
        <li><span>Option 4</span></li>
    </ul>
</div>

Why This Works #

• The updated JavaScript ensures only the clicked li gets the active class, which is standard for tab/menu interactions.
• Using li.active gives the selector a higher specificity score than the plain li selector, so the red border will correctly override the default blue one.
• The extra padding and list style cleanup just make the UI look polished—feel free to adjust those values to match your design.

内容的提问来源于stack exchange，提问作者MrMustafa