在1个元素上切换类，然后从休息中移除

Question

I'm more of a back-end guy, but I got frustrated by this small problem related to front-end.

I have a side menu with few links.

<div id="sideMenu" class="vertical-menu">
    <a href="#" id="allCategories" class="active" onclick="changeClass(this)">All</a>
    <a href="#" id="fruit" onclick="changeClass(this)">Fruits</a>
    <a href="#" id="vegetables" onclick="changeClass(this)">Vegetables</a>
    <a href="#" id="fish" onclick="changeClass(this)">Fish</a>
    <a href="#" id="meat" onclick="changeClass(this)">Meats</a>
</div>

And I'm trying to toggle active class on click and remove it from another menu items

<script>
    function changeClass(element) {
        $('#sideMenu').each(function(){
            var theID = $(this).attr('id');
            var menuElement = document.getElementById(theID);
            menuElement.classList.remove('active')
        });
        $(element).toggleClass('active');
    }
</script>

I've tried few other ways and it all fails, it toggles active class on the new item, but it doesn't remove it from other ones.

EDIT

I've ran into another problem.

 <div id="sideMenu" class="vertical-menu">
    <a href="/productsTable" id="allCategories" class="active">All</a>
    <a href="/productsTableCategory?id=1" id="fruit">Fruits</a>
    <a href="/productsTableCategory?id=2" id="vegetables">Vegetables</a>
    <a href="/productsTableCategory?id=3" id="fish">Fish</a>
    <a href="/productsTableCategory?id=4" id="meat">Meat</a>
</div>

 <script>
    $("#sideMenu a").click(function(e){
        e.preventDefault();
        $("#sideMenu a.active").removeClass("active");
        $(this).addClass("active");
    })
</script>

and back-end side

private ProductRepository productRepository;
    private ProductCategoryRepository productCategoryRepository;

@Autowired
public ProductsTableController(ProductRepository productRepository, ProductCategoryRepository productCategoryRepository) {
    this.productRepository = productRepository;
    this.productCategoryRepository = productCategoryRepository;
}

@RequestMapping("/productsTable")
    public String showProductsTable(Model model){
        Iterable<Product> products = productRepository.findAll();
        model.addAttribute("products", products);
        return "productsTable";
    }

@RequestMapping("/productsTableCategory")
    public String showProductsTable(Model model, @RequestParam int id) {
        ProductCategory productCategory = new ProductCategory();
        productCategory.setId(id);
        Iterable<Product> products = productRepository.findByProductCategory(productCategory);
        model.addAttribute("products", products);
        return "productsTable";
    }

Now it works almost perfect... almost because if I directly open localhost:8080/productsTableCategory?id=1 for example I'll have my table sorted by given id. But when I try to open this by clicking 1 of links from my sidemenu, it isn't redirecting me anywhere

Answer 1

You need to target anchor elements, excluding the current element ie element using the function .not() , then use .removeClass() . And use id selector with sideMenu element ie #sideMenu

function changeClass(element) {
    $('#sideMenu a').not(element).removeClass('active')
    $(element).toggleClass('active');
}

---

I would recommend you to use unobtrusive event handler and bind event using jQuery's .on() method

$('#sideMenu a').on('click', function (e) {
    e.preventDefault();
    $('#sideMenu a').not(this).removeClass('active')
    $(this).toggleClass('active');
})

and remove onclick="changeClass(this)"

 $('#sideMenu a').on('click', function(e) { e.preventDefault(); $('#sideMenu a.active').not(this).removeClass('active') $(this).toggleClass('active'); }) 

 .active { color: red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sideMenu" class=" vertical-menu"> <a href="#" class="active">All</a> <a href="#">Fruits</a> <a href="#">Vegetables</a> <a href="#">Fish</a> <a href="#">Meats</a> </div> 

Answer 2

1. First remove the class active from the anchor.
2. Then add the class to the clicked element.

 $("#sideMenu a").click(function(e){ e.preventDefault(); $("#sideMenu a.active").removeClass("active"); $(this).addClass("active"); }) 

 .active { color: red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sideMenu" class="vertical-menu"> <a href="#" id="allCategories" class="active">All</a> <a href="#" id="fruit">Fruits</a> <a href="#" id="vegetables">Vegetables</a> <a href="#" id="fish">Fish</a> <a href="#" id="meat">Meats</a> </div> 

Answer 3

Just need to change selector in your code:

<script>
    function changeClass(element) {
        $('a').each(function(){        // Here a is used. It will loop through all anchor tags and apply the JQ.
            var theID = $(this).attr('id');
            var menuElement = document.getElementById(theID);
            menuElement.classList.remove('active')
        });

        $(element).toggleClass('active');
    }
</script>

Answer 4

In pure javascript you can do it like this.

<div id="sideMenu" class="vertical-menu">
    <a href="#" id="allCategories" class="active" >All</a>
    <a href="#" id="fruit" >Fruits</a>
    <a href="#" id="vegetables" >Vegetables</a>
    <a href="#" id="fish" >Fish</a>
    <a href="#" id="meat" >Meats</a>
</div>

and a js code.

var links = document.querySelectorAll('#sideMenu a');


// removes active class from all links
function removeAll() {
    for (let i = 0; i < links.length; i++)
        links[i].className = '';
}

// adds active class to the clicked link, 
// but before it removes it from all other links
for (let i = 0; i < links.length; i++) {
    links[i].addEventListener('click', event => {
        removeAll();
        links[i].className = 'active';
    });
}

Answer 5

It may help you to make your menu active. Here window.sessionStorage is used..!

$("#sideMenu a").on('click', function(ev) {
    ev.preventDefault();
    window.sessionStorage.removeItem('activeMenu');
    window.sessionStorage.setItem('activeMenu', $(this).attr('href'));
    window.location.href = $(this).attr('href');
});

//check on redirected page (In your case productsTableCategory page)
$(document).ready(function() {
    if (window.sessionStorage.length > 0) {
        var menuToActive = window.sessionStorage.getItem('activeMenu');
        $("#sideMenu a.active").removeClass('active'); //comment this line to keep all menus active by default
        $('[href="' + menuToActive + '"]').addClass('active');
        window.sessionStorage.removeItem('activeMenu');
    } else {
        $('#allCategories').addClass('active');
    }
});