Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Sharim's avatar

I want to shorten the Javascript Code or Convert it into Angular Js

I'm making a project in Angular Js. I have this code which is working fine for me but its too long comparing to the functionality. I want to shorten the code as much as possible. Or I want to make this code recommended by Angular Js if possible.

    var m1 = $("#mouse1");
    var m2 = $("#mouse2");
    var m3 = $("#mouse3");
    var p1 = $("#page1");
    var p2 = $("#page2");
    var p3 = $("#page3"); 
    m1.mouseover(function() {
        p1.css('display', 'block');
        p2.css('display', 'none');
        p3.css('display', 'none');
        m2.removeClass('active');
        m3.removeClass('active');
    });
    m2.mouseover(function() {
        p2.css('display', 'block');
        p1.css('display', 'none');
        p3.css('display', 'none');
        m1.removeClass('active');
        m3.removeClass('active');
    });
    m3.mouseover(function() {
        p3.css('display', 'block');
        p1.css('display', 'none');
        p2.css('display', 'none');
        m1.removeClass('active');
        m2.removeClass('active');
    });
    p1.mouseover(function() {
        m1.addClass('active');
    });
    p2.mouseover(function() {
        m2.addClass('active');
    });
    p3.mouseover(function() {
        m3.addClass('active');
    });

All The Div blocks are separate from each other and their is no parent or children Divs.

0 likes
0 replies

Please or to participate in this conversation.