单击链接后更改内容

Question

我已经在这里尝试应用了一些建议，但是由于它仍然显示了我所做的两个div段落，因此似乎对我的任务不起作用。 我想减少创建不同页面的目的，只是为了输出几个文本，所以我决定这可能是最好的课程。 但这并不像我想象的那样有效。 这是我正在尝试做的链接 。 我想要的是，当点击厨师链接时，原始链接的段落和图像的内容都会改变，反之亦然。

这是代码的摘要

 $(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，因为它只是使页面漂亮，但您仍然可以在上面的链接中看到它。

你们知道我做错了吗？ 我该如何解决？

Answer 1

JS代码中唯一的错误是在方法为attr使用了attribute

$(document).ready(function() {
    $("a").click(function() {
        var id = $(this).attr("data-id");
        $("#pages div").hide();
        $(".div" + id).show();
    });
});

Answer 2

检查您的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> 

Answer 3

试试这个代码。 .attr用于获取属性，而.attribure

var id = $(this).attr("data-id");