Question

我已经尝试过在这里应用一些建议，但它似乎对我的任务不起作用，因为它仍然显示了我制作的两个div段。我想减少创建不同的页面只是为了输出几个文本，所以我认为这可能是最好的课程。但它并没有像我想象的那样发挥作用。这是我想要做的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，因为它只是使页面漂亮，但你仍然可以在上面的链接上看到它。

你知道我做错了什么吗？我怎么能解决这个问题？

Answer 1

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

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

点击链接后更改内容

3 个答案: