Javascript 使用链接更改div_Javascript_Jquery_Html_Css

Javascript 使用链接更改div

javascript jquery html css

Javascript 使用链接更改div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我得到了一个使用链接更改div的代码，但是当我将这些代码粘贴到dreamweaver并在firefox或google chrome上打开html文件时，它们就不起作用了。尽管如此，它们在小提琴上的表现还是完美无缺的。我们将不胜感激这是我的火狐谷歌浏览器 CSS/HTML/jQuery/Demo $document.ready 作用{ //隐藏所有div的可选代码 $div.hide；一元五角； //显示选定的div，并隐藏所有其他div $a.clicke函数{ e、防止违约； $+

我得到了一个使用链接更改div的代码，但是当我将这些代码粘贴到dreamweaver并在firefox或google chrome上打开html文件时，它们就不起作用了。尽管如此，它们在小提琴上的表现还是完美无缺的。我们将不胜感激

这是我的

火狐

谷歌浏览器

CSS/HTML/jQuery/Demo $document.ready 作用{ //隐藏所有div的可选代码 $div.hide；一元五角； //显示选定的div，并隐藏所有其他div $a.clicke函数{ e、防止违约； $+$this.attrclass.show.sillides'div'.hide； }; }; .divstyle{ 高度：300px；宽度：300px；边框：1px000； } 李先生{ 显示：内联块； } 单击按钮使其可见：一二三四

您似乎没有在文件中引用jQuery库。先检查一下这个。打开控制台F12以检查是否抛出任何错误。

在Dreamweaver中尝试以下操作：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Works in FF and Chrome</title>
<style>
.divstyle {
    height:300px;
    width:300px;
    border:1px solid #000;
}
.liststyle li {
    display:inline-block;
}
</style>
</head>
<body>
Click a button to make it visible:<br /><br />
<ul class="liststyle">
    <li><a id="one_link" href="#" class="one">One</a></li>
    <li><a id="two_link" href="#" class="two">Two</a></li>
    <li><a id="three_link" href="#" class="three">Three</a></li>
    <li><a id="four_link" href="#" class="four">Four</a></li>
</ul>
<br /><br />
<div class="divstyle" id="one">One</div>
<div class="divstyle" id="two">Two</div>
<div class="divstyle" id="three">Three</div>
<div class="divstyle" id="four">Four</div>
<br/><br/>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script>
$(document).ready(function() {
     // Optional code to hide all divs
     $("div").hide();
     $("#one").show();
     // Show chosen div, and hide all others    
     $("a").click(function (e) {
         e.preventDefault();    
         $("#" + $(this).attr("class")).show().siblings('div').hide();
     });
 });
</script>
</body>
</html>

检查项目中是否引用了jQuery。如果您有任何错误，请检查浏览器devtools控制台。如果您阅读了我的评论。另外，这应该不是一个有效的答案。当我创建一个新的HTML文件并将它们粘贴到那里时，它会起作用，但当我将代码粘贴到我现有的HTML网页上时，它不会起作用。我不知道为什么，我已经复制并粘贴了CSS/JS/HTML代码中的每一项内容。。。代码视图结果