Я пытаюсь изменить элемент id на событие click сверху (идентификатор привязки). Например:jQuery изменить элемент id, нажав на ссылку привязки
<div id="top-nav-list">
Будет chnage к:
<div id="new-top-nav-list">
Что находится внутри этого DIV: <div id="top-menu">...</div>
Мой jsFiddle: fiddle
Любые идеи или предложения? Благодарю.
Мой код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type="text/css">
ul{
list-style:none;
}
#top-menu{
background:#CCCCCC;
width:120px;
padding:2px;
float:left;
margin-right:5px;
}
#left-menu{
background:#CCCCCC;
width:120px;
padding:2px;
float:left;
}
</style>
</head>
<body>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(window).load(function(){
jQuery('#top').click('mouseover',function(e){
jQuery('top-nav-list').attr('id','new-nav-list');
});
});
</script>
<a href="#" id="top">Top</a> |
<a href="#" id="left">Left</a>
<br /><br />
<div id="top-menu">
<div id="top-nav-list">
<ul>
<li class="one"><a href="#">One</a></li>
<li class="two"><a href="#">Two</a></li>
<li class="three"><a href="#">Three</a></li>
</ul>
</div>
</div>
<div id="left-menu">
<div id="top-nav-list">
<ul>
<li class="one"><a href="#">One</a></li>
<li class="two"><a href="#">Two</a></li>
<li class="three"><a href="#">Three</a></li>
</ul>
</div>
</div>
</body>
</html>
Я думаю, что я понял, что причиной этого JS является то, что HTML имеет дубликаты идентификаторов, и он не может исправить HTML. – Barmar