CODEWITHSUNDEEP
javascripthtml
Aksel2099
Aksel2099

Reputation: 61

Including javascript to an html page

Well i'm new to html/js scripting but i'm working on a project and i want to using hyperlink to show/hide divs for example if i click on first hyperlink it should show div id:1 only and if i click on second hyperlink it should show 2nd div only. i managed to find an example of what i need on internet but i have no idea,why whatever i try it doesnot work for me

an example of what i need - my fiddle

and this is my code

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}
</style>
</head>
<body>


<body>
    Click a button to make it visible:<br /><br />
<a href="#" class="one">One</a>
<a href="#" class="two">Two</a>
<a href="#" class="three">Three</a>
<a href="#" class="four">Four</a><br /><br />

    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
    <div id="four">Four</div><br/><br/>




</body>


<script>
$("div").hide();
          // Show chosen div, and hide all others
        $("a").click(function (e) 
        {
            //e.preventDefault();
            $("#" + $(this).attr("class")).show().siblings('div').hide();
        });
</script>

</body>
</html>

Upvotes: 1

Views: 71

Answers (4)

aahhaa
aahhaa

Reputation: 2275

so you ned to include JQuery that's what $() is. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}
</style>
</head>
<body>


<body>
    Click a button to make it visible:<br /><br />
<a href="#" class="one">One</a>
<a href="#" class="two">Two</a>
<a href="#" class="three">Three</a>
<a href="#" class="four">Four</a><br /><br />

    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
    <div id="four">Four</div><br/><br/>




</body>


<script>
$("div").hide();
          // Show chosen div, and hide all others
        $("a").click(function (e) 
        {
            //e.preventDefault();
            $("#" + $(this).attr("class")).show().siblings('div').hide();
        });
</script>

</body>
</html>

Upvotes: 4

HalfWebDev
HalfWebDev

Reputation: 7668

You should add jquery in your project. You can use a CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

OR

you can include your own copy of library in project.

 <script src="path/jquery.min.js"></script>

Upvotes: 0

Mohideen bin Mohammed
Mohideen bin Mohammed

Reputation: 20206

you forget to include $ jquery in you script tag

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}
</style>
</head>
<body>


<body>
    Click a button to make it visible:<br /><br />
<a href="#" class="one">One</a>
<a href="#" class="two">Two</a>
<a href="#" class="three">Three</a>
<a href="#" class="four">Four</a><br /><br />

    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
    <div id="four">Four</div><br/><br/>




</body>

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script>
$("div").hide();
          // Show chosen div, and hide all others
        $("a").click(function (e) 
        {
            //e.preventDefault();
            $("#" + $(this).attr("class")).show().siblings('div').hide();
        });
</script>

</body>
</html>

Upvotes: 1

Suraj Rawat
Suraj Rawat

Reputation: 3763

It is Working For me on JSFIDDLE. Add jquery library on your local project.

add This on your Head Tag 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Upvotes: 1

Related Questions