个人中心
gpt4 book ai didi

javascript - 用纯 JavaScript 创建导航和页面

转载 作者：行者123 更新时间：2023-11-28 07:11:11 26 4
gpt4 key购买 nike

提前致歉，这是重复的。我是新来的，也是 JavaScript 新手。我将首先描述我的目标，然后展示代码。

基本上。我有一个带有简单导航栏的 HTML 页面(通常的 ul li 排列)。单击其中一个选项时，它将通过删除目标文章上的 .hide 类并将 .hide 类添加到可见页面来显示相关的“页面”(即标签)。以前，我只是使用“getElementByID”按 id 获取每个元素，显示要显示的内容并隐藏要隐藏的内容。

正如你所想象的，它最终会在一个函数中重复这么多次。我正在寻找一种更有效的方法来做到这一点。我想尝试的方法是获取所有导航元素并将它们放入一个数组中，然后获取所有“页面”元素并将它们放入一个数组中。当单击导航中的选项时，它返回数组中的索引位置，可以将其与其他数组中页面的索引位置进行比较。如果它们匹配，则删除 .hide 类以使“页面”可见。任何其他不匹配的内容，请将 .hide 类添加到剩余的“page”元素

这是我迄今为止的尝试:

HTML:

<!doctype html> <html> <head> <title>Practice to improve javascripting</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/practice.js"></script> </head>

<body onload="indexNum()"> <div id="pageContainer"> <ul> <a href="" class="select" id="test"><li>Test</li></a> <a href="" id="yay"><li>Test</li></a> <a href="" id="woo"><li>Test</li></a> </ul>

<article id="one"> <h4>Page one</h4> <p>Page one is now displayed</p> </article>

<article id="two" class="hide"> <h4>Page two</h4> <p></p> </article>

<article id="three" class="hide"> <h4>Page three</h4> <p></p> </article>

</div><!-- end of pageContainer div-->

</body> </html>

CSS:

/*CSS Document */

    body { background-color:whiteSmoke;
    font-family: Verdana, Geneva,sans-serif; font-size: 12pt; margin:0; padding:0;      
    }

    #pageContainer {margin: 20px auto 40px auto;
    padding:0; width: 600px; height:auto;
    background-color:snow;
    border: 1px solid gainsboro; border-radius: 3px; /*end of set-up code*/
    }

    /*navbar styles*/

    ul {
        background-color:white; 
        border: 1px solid violet;
        border-radius: 3px;
        width: 550px; height: 20px;
        margin: 15px auto 15px auto;
        list-style-type:none;
        padding: 0;
    }

    li {
        float:left;
        width:33%; height:20px;
        text-align:center;
    }

    .select li {
        background-color:violet;
        color: snow; font-weight:bold;
    }

    a {color: black;}

    /*page styles*/

    article {
        width: 600px; height: 400px;
        border-top: 1px solid gainsboro;
        margin:0; padding:0;
    }

    h4, p {margin: 10px 20px 10px 20px}

    .hide {display:none;}

这是我乱七八糟的 javascript 哈哈:

    //create global variables
var nav = document.getElementsByTagName

('a');

var page = document.getElementsByTagName

('article');


/*create a function that will be called on 

page load to find the index position of the 

navigation buttons:*/

function indexNum(){
    nav; //calling the nav global variable

    //search array for index positions
    for(var index = 0; index < nav.length; index++) {

       //store index number in variable?
       nav[index].indexNumber = index;

       //now search array of page index position
       for(var indexPages = 0; indexPages < page.length; indexPages++){

           //store index number in variable?
           nav[indexPages].indexedNumber = indexPages;

           //function to return index of element clicked
           nav[index].onclick = function() {

               if (this.indexNumber == page[indexPages]) {
                   page.className = "";
               } else if (this.indexNumber !== page[indexPages]) {
                   page.className = "hide";
               }

          }
     }
}

我的处理方式可能是错误的，但我希望能够在导航栏上添加尽可能多的选项以及相应的页面。甚至添加尽可能多的导航栏(用于页面上的子导航)和尽可能多的子页面。所以这就是我疯狂的原因哈哈。

提前非常感谢

最佳答案

好的，就这样吧。我对 JavaScript 中的每一步都进行了注释，以便您可以准确了解这里发生的情况。

这是完全动态的。您可以根据需要添加和删除文章，并且您的导航菜单将自动更新，没有任何限制。

var doStuff = function () {
  // Get all of the articles
  var articles = document.getElementsByTagName("article");

  // Define an empty array to hold the id's of the articles 
  var navIds = [];

  // Loop through the articles
  for (var i = 0; i < articles.length; i++) {

    // Get the classes for the current article
    var classes = articles[i].classList;

    var hidden = false;

    // Loop through the class list for the current article
    for (var a = 0; a < classes.length; a++) {

      // If the current class equals "hide"
      if (classes[a] === "hide") {

        // Set the variable "hidden" to true
        hidden = true;

        // Get out of the loop
        break;
      }
    }

    // If the article is hidden, add the ID to the navIds array so we can add it to the navigation
    if (hidden) {
      navIds.push(articles[i].id);
    }
  }

  // If there are hidden articles
  if (navIds.length > 0) {

    // Clear the navigation
    document.getElementById("nav").innerHTML = "";
  }

  // Loop through the navIds
  for (var i = 0; i < navIds.length; i++) {

    // Get the nav element (ul)
    var navElem = document.getElementById("nav");

    // Create a new li element
    var liElem = document.createElement("li");

    // Add the li element to the nav (ul) element
    navElem.appendChild(liElem);

    // Create a new a element
    var aElem = document.createElement("a");

    // Set the href on the new a element
    aElem.href = "#"

    // Set the "data-article" attribute to the id of the article to show when clicked
    aElem.setAttribute("data-article", navIds[i]);

    // Here, we're going to set the navigation title to the contents of the h4 element in the article
    // Get the current article
    var article = document.getElementById(navIds[i]);

    // Get the children of the current article
    var children = article.childNodes;

    // Define an empty variable to hold the h4 element when we find it
    var h4Elem;

    // Loop through the children of the current article
    for (var a = 0; a < children.length; a++) {

      // If the current child is an h4 element
      if (typeof children[a].tagName !== "undefined" && children[a].tagName.toLowerCase() === "h4") {

        // Set the h4Elem variable to the current child element
        h4Elem = children[a];

        // Get out of the loop
        break;
      }
    }

    // Since we defined h4Elem as an empty variable, we need to make sure it's a valid HTMLElement object
    if (h4Elem instanceof HTMLElement) {

      // Set the Inner HTML of the new a element to the Inner HTML of the article's h4 element
      aElem.innerHTML = h4Elem.innerHTML;
    }

    // Add the new a element to the new li element in the navigation
    liElem.appendChild(aElem);

    // Add a click event handler on the new a element in the navigation
    aElem.addEventListener("click", function () {

      // Get all of the articles
      var articles = document.getElementsByTagName("article");

      // Loop through the articles
      for (var i = 0; i < articles.length; i++) {

        // Get the classes for the current article
        var classes = articles[i].classList;

        // Define a hidden variable and set it to false
        var hidden = false;

        // Loop through the classes of the current article
        for (var a = 0; a < classes.length; a++) {

          // If the class is "hide"
          if (classes[a] === "hide") {

            // Set the hidden variable to true
            hidden = true;

            // Get out of the loop
            break;
          }
        }

        // If the article is not hidden
        if (!hidden) {

          // hide it
          articles[i].classList.add("hide");
        }
      }

      // Get the id of the article to show
      var elemIdToShow = this.getAttribute("data-article");

      // Get the element to show
      var elemToShow = document.getElementById(elemIdToShow);

      // Remove the hidden class from it
      elemToShow.classList.remove("hide");

      // Re-run the doStuff() function to regenerate the navigation and event handlers
      doStuff();
    });
  }
}
// Run the doStuff() function
doStuff();
/* Your original CSS, I didn't change anything */
body {background-color: whiteSmoke;font-family: Verdana, Geneva,sans-serif;font-size: 12pt;margin: 0;padding: 0;}
#pageContainer {margin: 20px auto 40px auto;padding: 0;width: 600px;height: auto;background-color: snow;border: 1px solid gainsboro;border-radius: 3px;}
ul { background-color: white;border: 1px solid violet;border-radius: 3px;width: 550px; height: 20px;margin: 15px auto 15px auto;list-style-type: none;padding: 0;}
li {float: left;width: 33%;height: 20px;text-align: center;}
.select li {background-color: violet;color: snow;font-weight: bold;}
a {color: black;}
article {width: 600px;height: 400px;border-top: 1px solid gainsboro;margin: 0;padding: 0;}
h4, p {margin: 10px 20px 10px 20px;}
.hide {display: none;}
<div id="pageContainer">
  <ul id="nav"><!-- Empty ul for dynamic navigation --></ul>
  <!-- Each article is a separate "page" -->
  <article id="one">
    <h4>Page one</h4>
    <p>Page one is now displayed</p>
  </article>
  <article id="two" class="hide">
    <h4>Page two</h4>
    <p>Page two is now displayed</p>
  </article>
  <article id="three" class="hide">
    <h4>Page three</h4>
    <p>Page three is now displayed</p>
  </article>
</div>

关于javascript - 用纯 JavaScript 创建导航和页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31294986/

26 4 0
文章推荐： javascript - 带有图像的 Div 在另一个 div 上
文章推荐： 由按钮激活的 Swift pageViewController
文章推荐： javascript - Bootstrap Tour - 每个用户具有不同值的 URL
文章推荐： css - 回退/响应式 CSS 样式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com