Включение JavaScript в HTML-страницу

Question

Ну, я новичок в сценариях HTML / JS, но я работаю над проектом, и я хочу использовать гиперссылку, чтобы показать / скрыть div, например, если я нажму на первую гиперссылку, он должен показывать только div id: 1 и если я нажимаю на вторая гиперссылка должна показывать только 2-й див. Мне удалось найти пример того, что мне нужно в Интернете, но я понятия не имею, почему все, что я пытаюсь, это не работает для меня

пример того, что мне нужно - моя скрипка

И это мой код

<!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>

javascript html

1

Aksel2099 28 Авг 2017 в 15:52

Answer 1

Поэтому вам нужно включить JQuery именно так и есть $().

<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>

4

aahhaa 28 Авг 2017 в 12:58

Answer 2

Вы должны добавить JQuery в ваш проект. Вы можете использовать CDN

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

Или

Вы можете включить свою собственную копию библиотеки в проект.

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

0

kushalvm 28 Авг 2017 в 12:58

Answer 3

Это работает для меня на JSFIDDLE. Добавьте библиотеку jquery в ваш локальный проект.

добавьте это в свой тег головы

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

1

suraj rawat 28 Авг 2017 в 12:56

Answer 4

Вы забыли включить $ jquery в вас 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>

1

Mohideen bin Mohammed 28 Авг 2017 в 12:56

Включение JavaScript в HTML-страницу

4 ответа

Новые вопросы

javascript