Question

我有一个问题，弄清楚如何让菜单项在点击时动态更改其他列表项。

例如我想要Box1：

<nav class="left">

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

更新＆＃39; topnav＆＃39;类：

<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菜单项时，例如 - ＆＃39;项目＆＃39;项目2＆＃39; /＆＃39;项目3＆＃39;列出项目更新，让我们说＆＃34; NewItemName＆＃34; /＆＃34; NewItemName2＆＃34; /＆＃34; NewItemName3＆＃34;

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

编辑：当您单击侧栏导航按钮时，我试图用新的改变项目（item，item2，item3）的li。例如，当您单击设置时，3个顶部按钮（顶部导航设置）将更改为配置文件设置，视频设置，声音设置（这些名称已组成，而不在代码中）

Answer 1

检查代码如下的fiddle并告诉我这是否是你想要的

<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

此代码使用Jquery

单击右侧框，项目菜单将更改

我不得不删除链接href =＆＃34;＆＃34;因为除非href以＆＃39;＃＆＃39;开头。并点击链接当前页面内的点让您离开页面！

如果您刚刚开始前端开发，您可能需要查看：

http://www.w3schools.com/

http://jquery.com/

http://jqueryui.com/

http://getbootstrap.com/

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

1 个答案: