1

我正在尝试更改顶部单击事件的 id 元素（锚链接 id）。例如：

<div id="top-nav-list">

将更改为：

<div id="new-top-nav-list">

在这个 div 里面： <div id="top-menu">...</div>

我的 jsFiddle：小提琴

有什么想法或建议吗？谢谢。


我的代码：

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

4 回答 4

3

它应该是：

    jQuery('#top').click(function(e){
            jQuery('#top-nav-list').attr('id','new-top-nav-list');
    });

.click()只是有一个函数参数，前面没有事件名称参数（您似乎将它与 混淆了.on()）。您需要#在选择器中包含top-nav-list. 而你-top在new-top-nav-list.

任何需要更改元素 ID 的设计在我看来都是可疑的。

于 2013-07-30T05:40:23.020 回答
1

参考这个试试。

jQuery('#top').click(function(e){
        jQuery('#top-menu #top-nav-list').attr('id','new-top-nav-list');
});
于 2013-07-30T05:53:10.640 回答
0 
jQuery('top-nav-list').attr('id','new-nav-list');

(1) 您错过了添加#代码。它应该看起来像

jQuery('#top-nav-list').attr('id','new-nav-list');

(2)你也不能像这样，2个像这样的事件处理程序

 jQuery('#top').click('mouseover', function (e) {  // wrong

(3)ID应该是唯一的。 多个元素不能有相同的 id。而是使用class.

于 2013-07-30T05:37:28.647 回答
0

尝试这个

     jQuery('#top').on("click",function (e) {
        alert(jQuery('#top-nav-list').attr('id'))
    jQuery('#top-nav-list').attr('id', 'new-nav-list');
});

小提琴演示

于 2013-07-30T05:43:03.963 回答