LearnFast.Ninja

jQuery select div with class

Add jQuery library to your HTML page. Build your custom styles. Build your custom HTML elements and mark them with Class. Call your div by its class name. Test the complete code.


Step 1: Add jQuery library to your HTML page. 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
 
Step 2: Build your custom styles. 

.MyClass

{

 background-color: #c0c0c0;

 color: #333333;

 cursor: pointer;

}

 
Step 3: Build your custom HTML elements and mark them with Class. 

<div class="MyClass" onclick="AddMark();">

    Hello from select div with class.

</div>

 
Step 4: Call your div by its class name. 

var My_Div = $(".MyClass");

 
Complete code: 

<html>

<head>

    <title>jQuery change css class name</title>

    <style type="text/css">

        .MyClass {

            color: #333333;

            cursor: pointer;

        }

    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>

    <script type="text/javascript">

        function AddMark() {

            $(".MyClass").css({ "background-color": "yellow", "cursor": "none" });

        }

    </script>

</head>

<body>

    <div class="MyClass" onclick="AddMark();">

        Hello from select div with class.

    </div>

</body>

</html>






Tags

jquery

jquery-tutorial-for-beginners jquery-select-element