'memory' 中下一篇文章的 Javascript (Jquery) 代码

标签 javascript jquery css html

首先，我知道 css 对于我的问题的(更简单的)可能性。但我正在努力学习 JS (Jquery)，所以请多多包涵。

我的计划: 菜单项(与我的内容部门内的文章 Hook )。最初只显示第一篇文章 (#intro)。 #menu 中的所有文章都应该在一个 javascript 数组中。当我点击 next 或 previous 时，另一篇文章与菜单(文章)的时间顺序相对应，他的数组应该显示。

这是我希望它最终看起来的样子的预览(注意这是“骨骼结构”):enter image description here

请在下面找到我的代码:

我是 JS 新手。我不明白为什么单独的文章不会显示。不过，隐藏所有内容的第一个功能最初是有效的。

我的 html 代码:

      <div id="wrapper">
  <header>

    <div id="logo" onclick="window.location.href='https://placeholdit.imgix.net/~text?txtsize=33&txt=50×50&w=50&h=50'">
      <img src="img/logo.png" alt="logo" />
      <h1>Hartmeting voor fitte mensen</h1>
    </div>

  </header>

  <!-- Stappenplan Menu -->
  <nav id="menu">
    <ul>

      <li><a href="#menu_a"> Introductie </a></li>
      <li><a href="#menu_b"> Het Probleem </a></li>
      <li><a href="#menu_c"> Stappenplan </a></li>
      <li><a href="#menu_d"> Hartmeting </a></li>
    </ul>

  </nav>

  <!-- HET STAPPENPLAN -->
  <div id="content">

    <!-- Intro Slide -->
    <article id="menu_a">
      <h2>Introductie</h2>
      <br>
      <figure>
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250×250&w=250&h=250" , alt="Intro Afbeelding" />
      </figure>
      <p>BLA BLA BLA BLA BLA BLA</p>
    </article>

    <!-- Slide 1 -->

    <article id="menu_b">
      <h2>Het Probleem</h2>
      <br>
      <figure>
        <img src="img/hetprobleem1.jpg" , alt="Eerste Afbeelding" />
      </figure>
      <p>BLA BLA BLA BLA BLA BLA</p>
    </article>

    <!-- Slide 2 -->

    <article id="menu_c">
      <h2>Hoe kan mijn hartslag meten?</h2>
      <br>
      <figure>
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250×250&w=250&h=250" , alt="Tweede Afbeelding" />
      </figure>

      <p>BLA BLA BLA BLA BLA BLA</p>

    </article>

    <!-- Slide 3 -->

    <article id="menu_d">

      <h2>Hart Meten</h2>
      <br>
      <figure>
        <!-- Hartmeet tool -->
        <div>
          <div id="klik_Hart" class="heart">
            <h3 id="uitleg">

                                                        </h3>
          </div>
          <br>
          <br>
          <br>

          <!-- Einde hartmeet tool-->

      </figure>

      <p>BLA BLA BLA BLA BLA BLA</p>
    </article>

    <!-- ABOUT -->
    <!-- <div id="about">

                                        <p>TEST TEST TEST TEST TEST TEST TEST TEST TEST </p>

                                    </div> -->


    <!-- Buttons -->
    <table id="volgorde">
      <th>
        <button class="button" name="previous">Vorige</button>
      </th>
      <th>
        <button class="button" name="next">Volgende</button>
      </th>
      <th>

        <!-- Checkbox Auto Slider -->
        <div class="auto_menu">
          <input type="checkbox" id="checkbox">
          <label for="checkbox">Auto Manual</label>
        </div>
        <!-- -->
      </th>

    </table>

    <div id="buffer"></div>
    <footer>
      <a href="#wrapper"> to the top! </a>
    </footer>

我的js代码:

      $(document).ready(function() {
   $('#content').hide();
 });

 var visible = $('#menu_a').first();

 var show_me = function(article) {

   visible.hide();
   visible = article;
   visible.show();
 }

 $("#menu_a").click(function(event) {

   var id_of_article = $(this).attr('href');
   var the_article = $(id_of_article);
   show_me(the_article);
   even.preventDefault();
 });


 $('#next').click(function(event) {
   var next = visible.next();
   if (next.length != 0) { // is there another article left?
     show_me(next);
   }
   event.preventDefault();

我的 CSS 样式表:

    #titel {
  color: #B0C4DE;
  text-align: center;
}

body {
  background-color: #708090;
  color: grey;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  font-size: 12pt;
  width: 100%%
}

#wrapper {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-image: url("../img/bg.jpg");
  background-size: cover;
  background-position: left top;
  border: 2px groove #191970;
  overflow: auto;
}

#content {
  margin-left: auto;
  margin-right: auto;
  float: left;
  width: 70%;
}

#content img {
  height: 250px;
  width: 450px;
}

#menu {
  font-weight: thin;
  color: grey;
  float: left;
  width: 15%;
  text-align: center;
  margin-left: 5%;
  margin-top: 6.7%;
  font-size: 10pt;
}


/*#about{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50%;
    clear: left;
    float: left;
    float: right;
    width: 15%;
    text-align: center;
}*/

ul {
  list-style-type: none;
}

h1 {
  text-shadow: 1px 1px 3px #00008B;
}

a {
  display: block;
  text-decoration: none;
  color: #FFA07A;
  background-color: grey;
  border: 1px solid #B0C4DE;
  padding: 5px;
}

a:hover {
  background-color: #FAEBD7;
  color: blue;
}

footer {
  overflow: hidden;
  clear: both;
}

#volgorde {
  font-weight: thin;
  color: grey;
  width: 10%;
  text-align: center;
  clear: both;
  margin-left: 3%;
  margin-bottom: 2%;
}

.button {
  background-color: #5F9EA0;
  color: #FFA07A;
  border: none;
  color: white;
  padding: 5px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

.heart {
  color: #FBF9FF;
  background-image: url("../img/hart4.png");
  background-size: 150px 150px;
  height: 150px;
  width: 150px;
}

.heart:hoover {
  color: #FFA07A;
  background-color: grey;
}

#uitleg p {
  color: #FA8072;
}

#logo img {
  float: left;
  width: 60px;
  height: 60px;
  margin-left: 2%;
}

#logo h1 {
  position: relative;
  top: 15px;
  left: 10px;
}

#klik_ {
  text-align: center;
}

article p {
  height: 200px;
  width: 450px;
  font-size: 10pt;
  color: grey;
  font-weight: bold;
  overflow: scroll;
  margin-left: 4%;
  margin-bottom: 5%;
  text-align: justify;
  text-justify: inter-word;
}

#buffer {
  clear: both;
  height: 10%;
}

#stappen {
  font-weight: bold;
  font-size: 10pt;
}

.auto_menu {
  position: relative;
  margin: 5px auto;
  width: 160px;
  font-size: 14px;
}

我的 JS 做错了什么？我的意图是将所有菜单项放入一个变量中，并使用“下一个”/“上一个”按钮显示菜单项的内容。

JSFiddle Preview

编辑 

var articleIds=['menu_a', 'menu_b', 'menu_c', 'menu_d'];

 var visible = $('#menu_a').first();

 var show_me = function(article) {

   visible.hide();
   visible = article;
   visible.show();
 }

 $("#menu_a").click(function(event) {

   var id_of_article = $(this).attr('href');
   var the_article = $(id_of_article);
   show_me(the_article);
   even.preventDefault();
 });

$('#next').click(function (event)
    {
        var next;
        if (visible.attr('#content') == articleIds[articleIds.length - 1])//article is the last one
            next = $('#' + articleIds[0]); //come back to first one
        else
            next = visible.next();
        show_me(next);
        event.preventDefault();
    });

最佳答案

我对您的代码做了一些修改。有些 div 没有结束标记，在图像中你 在 src=""和 alt=""之间放一个 ','。它们之间必须只有空间。 并且脚本必须在文档的末尾。 然后按钮 next 你写了 name='next' 它必须是 id="next"。 然后我删除了行 $('#content').hide(); 您必须知道 $('#asdf') 仅适用于元素的 id。所以必须为您的链接设置 ID:

<a id="Some_Name" href="#menu_a">Introductie </a>

并测试了下一个按钮，它对我做了一些事情，但我不知道你到底想要什么。 最后你的代码是这样的，请测试:

<body>
<div id="wrapper">
    <header>
        <div id="logo" onclick="window.location.href='https://placeholdit.imgix.net/~text?txtsize=33&txt=50×50&w=50&h=50'">
            <img src="img/logo.png" alt="logo" />
            <h1>Hartmeting voor fitte mensen</h1>
        </div>
    </header>
    <nav id="menu">
        <ul>
            <li><a href="#menu_a">Introductie </a></li>
            <li><a href="#menu_b">Het Probleem </a></li>
            <li><a href="#menu_c">Stappenplan </a></li>
            <li><a href="#menu_d">Hartmeting </a></li>
        </ul>
    </nav>
    <div id="content">
        <article id="menu_a">
            <h2>Introductie</h2>
            <br>
            <figure>
                <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250×250&w=250&h=250" alt="Intro Afbeelding" />
            </figure>
            <p>BLA BLA BLA BLA BLA BLA</p>
        </article>
        <article id="menu_b">
            <h2>Het Probleem</h2>
            <br>
            <figure>
                <img src="img/hetprobleem1.jpg" alt="Eerste Afbeelding" />
            </figure>
            <p>BLA BLA BLA BLA BLA BLA</p>
        </article>

        <article id="menu_c">
            <h2>Hoe kan mijn hartslag meten?</h2>
            <br>
            <figure>
                <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250×250&w=250&h=250" alt="Tweede Afbeelding" />
            </figure>
            <p>BLA BLA BLA BLA BLA BLA</p>
        </article>
        <article id="menu_d">
            <h2>Hart Meten</h2>
            <br>
            <figure>
                <div>
                    <div id="klik_Hart" class="heart">
                        <h3 id="uitleg">asdfasdf
                        </h3>
                    </div>
                </div>
                <br>
                <br>
                <br>
            </figure>
            <p>BLA BLA BLA BLA BLA BLA</p>
        </article>
        <table id="volgorde">
            <th>
                <button class="button" name="previous">Vorige</button>
            </th>
            <th>
                <button class="button" id="next">Volgende</button>
            </th>
            <th>
                <div class="auto_menu">
                    <input type="checkbox" id="checkbox">
                    <label for="checkbox">Auto Manual</label>
                </div>
            </th>
        </table>
        <div id="buffer"></div>
        <footer>
            <a href="#wrapper">to the top! </a>
        </footer>
    </div>
    </div>
    <script>
    $(document).ready(function ()
    {
        $('#content').hide();
    });

    var visible = $('#menu_a').first();

    var show_me = function (article)
    {

        visible.hide();
        visible = article;
        visible.show();
    }

    $("#menu_a").click(function (event)
    {

        var id_of_article = $(this).attr('href');
        var the_article = $(id_of_article);
        show_me(the_article);
        even.preventDefault();
    });


    $('#next').click(function (event)
    {
        var next = visible.next();
        if (next.length != 0)
        { // is there another article left?
            show_me(next);
        }
        event.preventDefault();
    });
</script>

关于 'memory' 中下一篇文章的 Javascript (Jquery) 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40812916/

上一篇：html - 防止 execCommand 中的 FONT 标记

下一篇：html - Bootstrap Modal 最小高度不起作用

相关文章：

jquery - html 文本覆盖自身

javascript - 在网站上显示 GitHub 提交

javascript - 如何在 if 语句中包含鼠标滚轮滚动和单击事件？

javascript - 我希望字符串的前两个字符不应该是特殊字符

javascript - 合并两个代码片段？将用户输入的 Youtube url 转换为嵌入 url，然后用转换后的 url 替换 iframe src

Javascript/Jquery 搜索行为

javascript - 如何删除换行符并制作单行文本？

javascript - 未使用 JQuery 和 Javascript 从文件输入 HTML 控件获取 [对象文件]

javascript - 将 cookie 添加到 js fiddle 以保存用户键入的内容

html - sub div css 格式化问题？

©2024 IT工具网  联系我们