我已经尝试应用此处的一些建议，但它似乎无法完成我的任务，因为它仍然显示我制作的两个 div 段落。我想减少创建不同的页面只是为了输出几个文本，所以我认为这可能是最好的类(class)。但它并没有像我想象的那样工作。这是 Link我正在尝试做的事情。我想要的是当厨师链接被点击时，原始链接的段落和图像的内容都会改变，反之亦然。
这里是代码的总结
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attribute("data-id"); // Using a custom attribute.
$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
$(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-wrapper">
<h1> ABOUT US </h1>
<h2><a href="#origin" data-id="1" class="menu-text">The Origin</a> <span style="font-size: 56px;">||</span> <a href="#chef" data-id="2" class="menu-text">The Chef</a></h2>
<!---Start Banner Wrapper Section-->
<div id="pages">
<div class="mydivshow div1">
<section class="left-col">
<h1> Sakurajima Origin </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi nibh, dictum eu laoreet at, rhoncus eget eros. Etiam elementum id nulla a accumsan. Etiam commodo fermentum sagittis. Etiam non tellus eget arcu elementum tempus. Proin pretium
velit quis sem porttitor, eu vulputate diam ultricies. Phasellus sollicitudin gravida tortor nec ullamcorper. Sed neque lorem, tempus vel leo non, finibus fringilla velit. Quisque pellentesque diam enim, pulvinar viverra lorem hendrerit eu.
Pellentesque porta, nisl non efficitur eleifend, lorem mauris placerat lectus, non accumsan massa ante in nisl. Fusce ornare bibendum erat. Cras placerat convallis ante, in accumsan sem cursus placerat. Pellentesque in mauris augue. Phasellus
quis nibh felis. Aenean vulputate vestibulum nisl, a sollicitudin metus. Sed eleifend eget nulla ut consectetur. Nam venenatis scelerisque quam in viverra.</p>
<p>Curabitur quis tellus eget risus hendrerit vulputate. Phasellus sit amet nisi commodo, semper sapien sed, finibus purus. Duis et eleifend erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut urna dapibus, placerat orci a, euismod
justo. Fusce placerat nisi sit amet pharetra mollis. Donec aliquam turpis ac ligula commodo dapibus. Suspendisse facilisis consectetur tortor id condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Pellentesque et sollicitudin eros, a tempus erat.</p>
</section>
<section class="sidebar">
<img src="https://www.japantimes.co.jp/wp-content/uploads/2013/01/fv20120408a1b.jpg">
</section>
</div>
<div class="mydivhide div2">
<section class="left-col">
<h1> Chef Kojirō Shinomiya </h1>
<p> Upon arrival in France, Kojirō immediately set off to work to make a name for himself. Setbacks soon followed him though in his first days around Paris, losing one of his luggage bags at the airport and being rejected from several restaurants.
He later reflected on how much easier it was in Japan where every restaurant had previously wanted him to work for them. He could not even be counseled by his friends there as he had told them not to contact him or that he would not get in touch
with them until he had succeeded. When Kojirō finally did manage to land a position after impressing the head chef, he was soon fired after being sabotaged by the sous chef who retaliated after being caught by Kojirō trying to pass off sub-standard
meat in the restaurant. Frustrated but unwilling to give up, Kojirō sought refuge at a library, looking up different recipes so he could continue his training. As the library was preparing to close, Kojirō ran into someone unexpected.</p>
<p>Kojirō obtained his own restaurant, he performed well for the first few initial months, but it became apparent that he was facing adversity from the people there who belittled his ambitions. After his chefs began to disobey his judgments, Kojirō
reached a period of depression due to the rapid decrease in work quality and positive feedback. It was at this time that he changed his entire work ethic and treatment of his employees. He fired his insubordinate chefs and became a ruthless
head chef, intimidating his workers to obey his judgments. Because of this, Kojirō finally emerged out of his slump and the people of France began to revere him as a French Cuisine genius. After many years of hard work, Kojirō was awarded the
Pluspol award that he had long sought after.</p>
</section>
<section class="sidebar">
<img src="https://i.pinimg.com/originals/a6/41/0b/a6410b66dc1698ab56a0e57f9e933114.jpg">
</section>
</div>
<!---ENd Start Banner Wrapper Section-->
</div>
</div>我没有在此处包含 css，因为它只是使页面更漂亮，但您仍然可以在上面的链接中看到它。
你们知道我做错了什么吗？我该如何解决这个问题？
最佳答案
检查你的jquery。 attribute()默认没有定义，应该是attr()。检查以下代码段以供引用。
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr("data-id"); // Using a custom attribute.
$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
$(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});* {
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #FFF;
font-family: 'Hindi', sans-serif;
font-size: 18px;
position: relative;
}
h1 {
font-family: 'Times', sans-serif;
text-align: center;
font-size: 250%;
color: #ae396d;
text-transform: uppercase;
letter-spacing: 3px;
padding: 3% 0;
}
h2 {
font-family: 'Times', sans-serif;
text-align: center;
color: #ae396d;
letter-spacing: 2%;
margin-top: -35px;
}
h3 {
font-family: 'Times', sans-serif;
text-align: center;
color: #741C57;
text-transform: uppercase;
letter-spacing: 1%;
}
p {
padding: 2%;
color: #4A4444;
text-align: justify;
}
img {
max-width: 100%;
max-height: auto;
}
#banner-wrapper {
max-width: 1280px;
margin: 0 auto;
}
.left-col {
width: 60%;
float: left;
margin: 4% 0 4% 4%;
}
.sidebar {
width: 26%;
float: right;
margin: 4% 4%;
}
.sidebar img {
opacity: 0.8;
margin-top: 100px;
}
.clearfix {
clear: both;
}
/*---Start Media Queries--*/
@media screen and (max-width: 768px) {
.slider .bx-wrapper .bx-controls {
display: none;
}
.slider1 li img {
width: 100%;
height: auto;
margin-top: 51px;
}
.parallax-inner {
display: none;
}
.one-third {
width: 100%;
margin: 4% 0;
}
.one-half {
display: none;
}
h1 {
font-size: 125%;
}
.left-col {
width: 100%;
margin: 0 0 3% 0;
}
.sidebar {
width: 100%;
margin: 0;
}
h3 {
padding-top: 3%;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-wrapper">
<h1> ABOUT US </h1>
<h2><a href="#origin" data-id="1" class="menu-text">The Origin</a> <span style="font-size: 56px;">||</span> <a href="#chef" data-id="2" class="menu-text">The Chef</a></h2>
<!---Start Banner Wrapper Section-->
<div id="pages">
<div class="mydivshow div1">
<section class="left-col">
<h1> Sakurajima Origin </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi nibh, dictum eu laoreet at, rhoncus eget eros. Etiam elementum id nulla a accumsan. Etiam commodo fermentum sagittis. Etiam non tellus eget arcu elementum tempus. Proin pretium
velit quis sem porttitor, eu vulputate diam ultricies. Phasellus sollicitudin gravida tortor nec ullamcorper. Sed neque lorem, tempus vel leo non, finibus fringilla velit. Quisque pellentesque diam enim, pulvinar viverra lorem hendrerit eu.
Pellentesque porta, nisl non efficitur eleifend, lorem mauris placerat lectus, non accumsan massa ante in nisl. Fusce ornare bibendum erat. Cras placerat convallis ante, in accumsan sem cursus placerat. Pellentesque in mauris augue. Phasellus
quis nibh felis. Aenean vulputate vestibulum nisl, a sollicitudin metus. Sed eleifend eget nulla ut consectetur. Nam venenatis scelerisque quam in viverra.</p>
<p>Curabitur quis tellus eget risus hendrerit vulputate. Phasellus sit amet nisi commodo, semper sapien sed, finibus purus. Duis et eleifend erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut urna dapibus, placerat orci a, euismod
justo. Fusce placerat nisi sit amet pharetra mollis. Donec aliquam turpis ac ligula commodo dapibus. Suspendisse facilisis consectetur tortor id condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Pellentesque et sollicitudin eros, a tempus erat.</p>
</section>
<section class="sidebar">
<img src="https://www.japantimes.co.jp/wp-content/uploads/2013/01/fv20120408a1b.jpg">
</section>
</div>
<div class="mydivhide div2" style="display:none;">
<section class="left-col">
<h1> Chef Kojirō Shinomiya </h1>
<p> Upon arrival in France, Kojirō immediately set off to work to make a name for himself. Setbacks soon followed him though in his first days around Paris, losing one of his luggage bags at the airport and being rejected from several restaurants.
He later reflected on how much easier it was in Japan where every restaurant had previously wanted him to work for them. He could not even be counseled by his friends there as he had told them not to contact him or that he would not get in touch
with them until he had succeeded. When Kojirō finally did manage to land a position after impressing the head chef, he was soon fired after being sabotaged by the sous chef who retaliated after being caught by Kojirō trying to pass off sub-standard
meat in the restaurant. Frustrated but unwilling to give up, Kojirō sought refuge at a library, looking up different recipes so he could continue his training. As the library was preparing to close, Kojirō ran into someone unexpected.</p>
<p>Kojirō obtained his own restaurant, he performed well for the first few initial months, but it became apparent that he was facing adversity from the people there who belittled his ambitions. After his chefs began to disobey his judgments, Kojirō
reached a period of depression due to the rapid decrease in work quality and positive feedback. It was at this time that he changed his entire work ethic and treatment of his employees. He fired his insubordinate chefs and became a ruthless
head chef, intimidating his workers to obey his judgments. Because of this, Kojirō finally emerged out of his slump and the people of France began to revere him as a French Cuisine genius. After many years of hard work, Kojirō was awarded the
Pluspol award that he had long sought after.</p>
</section>
<section class="sidebar">
<img src="https://i.pinimg.com/originals/a6/41/0b/a6410b66dc1698ab56a0e57f9e933114.jpg">
</section>
</div>
<!---ENd Start Banner Wrapper Section-->
</div>
</div>关于javascript - 单击链接更改内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46967923/