gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:35:38 25 4
gpt4 key购买 nike

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

例如我想要 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 菜单项时,例如 - 'Item'/'Item2'/'Item3' 列表项更新为“NewItemName”/“NewItemName2”/“NewItemName3”

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

编辑: 当您单击侧边栏导航按钮时,我试图用新的 li 更改 (item,item2,item3)。例如,当您单击设置时,顶部的 3 个按钮(顶部导航栏)将更改为配置文件设置、视频设置、声音设置(这些名称是编造的,而不是在代码中)

最佳答案

检查这个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

  1. 这段代码使用了Jquery
  2. 点击右边的框和元素菜单将改变
  3. 我必须删除链接 href="",因为除非 href 以 '#' 开头并指向当前页面内部,否则单击链接会使您离开该页面!

如果您刚刚开始前端开发,您可能想看看:

  1. > http://www.w3schools.com/
  2. > http://jquery.com/
  3. > http://jqueryui.com/
  4. > http://getbootstrap.com/

关于javascript - 如何使用其他 Javascript 数组 li 动态加载 Li 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25543579/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com