如何使用其他Javascript数组li动态加载Li元素

Question

I have a problem figuring out how to make my menu items dynamically change other list items when clicked on. 我在弄清楚如何使我的菜单项在单击时动态更改其他列表项时遇到问题。

For example I want Box1: 例如我想要Box1：

<nav class="left">

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

to update the li's in the 'topnav' class: 更新“ 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>

so when a user clicks box1 menu item on the left class navigation menu, the for instance - 'Item'/'Item2'/'Item3' list item updates to lets say "NewItemName"/"NewItemName2"/"NewItemName3" 因此，当用户单击左侧类导航菜单上的box1菜单项时，例如-'Item'/'Item2'/'Item3'列表项更新为说“ NewItemName” /“ NewItemName2” /“ NewItemName3”

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

edit: I am trying to change the li's of (item,item2,item3) with new ones when you click the side bars navigation buttons. 编辑：当您单击侧边栏导航按钮时，我试图用新的更改li（item，item2，item3）。 ex, when you click settings the 3 top buttons(top nav li's) would change to profile settings, video settings, sound settings (these names are made up and not in the code) 例如，当您单击设置时，顶部的3个按钮（顶部导航按钮）将更改为配置文件设置，视频设置，声音设置（这些名称是组成的，不在代码中）

Answer 1

Check this fiddle whose code is also below and tell me if it is what you want 检查这个提琴，其代码也在下面，并告诉我它是否是您想要的

<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>

EDIT: 编辑：

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

This code uses Jquery 这段代码使用Jquery
Click on the right boxes and item menu will change 单击右边的框，项目菜单将更改
I had to remove the links href="" because unless the href starts with '#' and points inside the current page clicking the link makes you leave the page! 我必须删除链接href =“”，因为除非href开头为“＃”并指向当前页面内，否则单击链接会使您离开页面！

If you are just starting front end development you may want to have a look at: 如果您只是开始前端开发，则可能需要看一下：

http://www.w3schools.com/ http://www.w3schools.com/
http://jquery.com/ http://jquery.com/
http://jqueryui.com/ http://jqueryui.com/
http://getbootstrap.com/ http://getbootstrap.com/

如何使用其他Javascript数组li动态加载Li元素

问题描述

1 个解决方案

解决方案1
0 2014-08-28 09:34:58

如何使用其他Javascript数组li动态加载Li元素

问题描述

1 个解决方案

解决方案1 0 2014-08-28 09:34:58

解决方案1
0 2014-08-28 09:34:58