如何动态加载Li元素's与其他Javascript Array li

How to dynamically load Li element's with other Javascript Array li

本文关键字：其他 li Array Javascript 元素 何动态 动态 Li 加载      更新时间：2023-09-26

我在弄清楚如何使我的菜单项在单击时动态更改其他列表项时遇到问题。

例如，我想要Box1:

<nav class="left">
                <ul>
                    <li>
                    <a href=""><br>box1</a>
                    </li>
...

更新"topnav"类中的li：

<header class="topnav">
                        <ul>
                            <li><a href="">Item</a></li>
                            <li><a href="">Item2</a></li>
                            <li><a href="">Item3</a></li>
                        </ul>
                    </header>

因此，当用户单击左侧类导航菜单上的box1菜单项时，例如"项"/"项2"/"项目3"列表项会更新为"NewItemName"/"NewItemName2"/"NewItemName3"

示例代码笔：http://codepen.io/anon/pen/Epiom

编辑：当你点击侧栏导航按钮时，我正试图用新的来更改（item，item2，item3）的li。例如，当您单击设置时，3个顶部按钮（顶部导航李）将更改为配置文件设置、视频设置、声音设置（这些名称是虚构的，不在代码中）

检查下面的这个小提琴，告诉我它是否是你想要的

<body>
    <header class="topnav">
        <ul>
            <li><a href="">Item</a>
            </li>
            <li><a href="">Item2</a>
            </li>
            <li><a href="">Item3</a>
            </li>
        </ul>
    </header>
    <nav class="left">
        <ul>
            <li>box</li>
            <li>otherbox</li>
        </ul>
    </nav>
    <script>
        $(function()
        {
            $(".left li").click(function()
            {
                var box = $(this).html();
                $( ".topnav li a" ).each(function( index ) 
                {
                    $(this).html("New" + box + "_" + index)
                });
            });
        });
    </script>
</body>

编辑：

http://codepen.io/zen_coder/pen/beCKf

  1. 此代码使用Jquery
  2. 单击右侧框，项目菜单将发生更改
  3. 我不得不删除链接href="，因为除非href以'#'开头并指向当前页面内部，否则单击该链接将导致您离开页面

如果你刚刚开始前端开发，你可能想看看：

  1. http://www.w3schools.com/
  2. http://jquery.com/
  3. http://jqueryui.com/
  4. http://getbootstrap.com/
相关文章：