Question

我有一个使用链接更改div的代码，但是当我将这些代码粘贴到Dreamweaver并在firefox或google chrome上打开html文件时，它们无法正常工作。虽然他们确实在小提琴上完美无瑕地工作。将不胜感激。

火狐 Screenshot firefox

谷歌浏览器

Screenshot chrome

CSS / HTML / jQuery / Demo

$(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();
    });

});

.divstyle {
    height:300px;
    width:300px;
    border:1px solid #000;
}
.liststyle li {
    display:inline-block;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
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/>

Answer 1

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

Answer 2

看来，您没有在文件中引用jQuery库。先检查一下。打开控制台（F12）以检查是否有任何错误。

使用链接更改div

2 个答案: