我在弄清楚如何使我的菜单项在单击时动态更改其他列表项时遇到问题。
例如我想要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
这段代码使用Jquery
单击右边的框,项目菜单将更改
我必须删除链接href =“”,因为除非href开头为“#”并指向当前页面内,否则单击链接会使您离开页面!
如果您只是开始前端开发,则可能需要看一下:
http://www.w3schools.com/
http://jquery.com/
http://jqueryui.com/
http://getbootstrap.com/