Change CSS Link Property Onclick with JavaScript/Jquery

Change CSS Link Property onClick with Javascript/JQuery?

JQUERY:

$(function() {
   var links = $('a.link').click(function() {
       links.removeClass('active');
       $(this).addClass('active');
   });
});

HTML MARKUP:

<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>

I suggest adding a class to the links, that way it's easier.

CSS:

a.link.active { color:blue; }

Added a Live Version (fiddle): http://jsfiddle.net/gHb9F/

Change CSS properties on click

Firstly, using on* attributes to add event handlers is a very outdated way of achieving what you want. As you've tagged your question with jQuery, here's a jQuery implementation:

<div id="foo">hello world!</div>
<img src="zoom.png" id="image" />

$('#image').click(function() {
    $('#foo').css({
        'background-color': 'red',
        'color': 'white',
        'font-size': '44px'
    });
});

A more efficient method is to put those styles into a class, and then add that class onclick, like this:

$('#image').click(function() {
  $('#foo').addClass('myClass');
});

.myClass {
  background-color: red;
  color: white;
  font-size: 44px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="foo">hello world!</div>
<img src="https://i.imgur.com/9zbkKVz.png?1" id="image" />

Onclick event, unable to change .CSS file using jQuery

Try this:

<!DOCTYPE html>
<html lang=en-CA>
<head>
    <meta charset=utf-8>
    <title>Test</title>
    <link id='mainStylesheet' href='css/styles1.css' type='text/css' rel='stylesheet'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('nav a[href]').click(function(e){
            e.preventDefault();
            $('#mainStylesheet').prop('href', $(this).prop('href'));
        });
    });
    </script>
</head>

<nav>
    <ul>
        <li><a href='css/styles1.css'>Original</a></li>
        <li><a href='css/styles2.css'>Bigger</a></li>
    </ul>
</nav>

Notice that I have given an ID to the link element, in order to specifically change the href property of that.

Change class css with javascript onclick

$(function () {    $("#ribad").click(function () {        $(".javakast").switchClass("javakast", "javakast2");        $(".javakast2").switchClass("javakast2", "javakast");    });});

.javakast{   color:red;}.javakast2{   color:blue;}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><div class="ribad" id="ribad">    <div class="javakast" id="javakast">       <h1>Click me to change class</h1>    </div></div>

Change css:hover effect to jquery.onclick()

Instead of the pseudo selector .navigation:hover use a new class like .navigation.open in css, then use .toggleClass() to toggle the menu visibility in the click() handler

jQuery(function ($) {
    //$(".navigation").addClass("js");
    //$(".navigation").addClass("js").before('<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>');

    $("#mobile").click(function () {
        $(".navigation").toggleClass('open');
    });
})

Demo: Fiddle

Note: In your fiddle, you forgot to add jQuery library

change Css on click event

I think you're confusing how ASP.NET and Javascript interact with each other. When a user clicks on one of those links, the onclick event will fire, but then ASP.NET will load the page that relates to the link, therefore resetting the navigation menu.

What you probably want to do instead of using onclick events is to have a class on your Masterpage that identifies what page it is on, and then add the homeactive class to whatever link it needs to be on.

change the href of a css link via jquery

Html:

<head>
<link id="test" href="foo.css" rel="stylesheet" type="text/css" />
</head>
<body>
    ...
</body>

And the jQuery:

$(document).ready(function() {
    $("#test").attr("href", "bar.css");
});

Change CSS Link Property Onclick with JavaScript/Jquery