Question

我是html / js脚本的新手，但我正在开发一个项目，我想使用超链接来显示/隐藏div 例如，如果我点击第一个超链接它应该只显示div id：1如果我点击第二个超链接它应该只显示第二个div。我设法找到了我在互联网上需要的一个例子，但我不知道，为什么我尝试它不适合我

an example of what i need - my fiddle

这是我的代码

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

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>

Answer 2

它在JSFIDDLE上为我工作。在本地项目中添加jquery库。

在头标上添加此内容

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

Answer 3

您忘了在$

中加入jquery script tag

＆＃13;

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

＆＃13;

Answer 4

您应该在项目中添加jquery。你可以使用CDN

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

OR

您可以在项目中包含您自己的库副本。

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

将javascript包含在html页面中

4 个答案: