CODEWITHSUNDEEP
javascriptjquerycss
Dio Cane
Dio Cane

Reputation: 83

Jquery: change css selector on click

I just get {"error": "Please use POST request"} when I run this

$("#ricomporreclick").click(function () {
    $("#film").css('visibility', 'hidden');
    $("#ricomporre").css('visibility', 'visible');
});

What's wrong with the code? I'm tring to change the selector without page being reloaded.. when the click is triggered #film should be display:none and #ricomporre should be visible.

http://jsfiddle.net/8Ndba/

Upvotes: 0

Views: 47

Answers (4)

soarjay
soarjay

Reputation: 651

You need to stop the link from redirecting by using the preventDefault method. I've edited the fiddle to show this

$("#ricomporreclick").click(function (e) {
    $("#film").css('visibility', 'hidden');
    $("#ricomporre").css('visibility', 'visible');
    e.preventDefault();
});

What was happening previously was that it was correctly changing the visibility, but then the link was reloading the page causing the css to be reset to the stylesheet.

Upvotes: 0

Barmar
Barmar

Reputation: 780724

Change your anchor so the URL doesn't do anything:

<a href="javascript:void()" id="ricomporreclick">HERE</a>

DEMO

Upvotes: 0

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

just put return false at end of the code block.

Updated Your Fiddle

Upvotes: 2

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67197

Try to use event.preventDefault() to prevent the default functionality of the anchor tag,

$("#ricomporreclick").click(function (e) {
    e.preventDefault()
    $("#film").css('visibility', 'hidden');
    $("#ricomporre").css('visibility', 'visible');
});

DEMO

Upvotes: 1

Related Questions