的Javascript菜单栏与菜单项

我有一个菜单栏旁边的刻度线如图所示与价值一，二和三目前该菜单项的.Onclick（例如，一个）我显示一个标签都有一个的Javascript菜单栏与菜单项

怎样才可以有一个选择菜单项旁边的TickMark，并在取消选中时删除TickMark。

这是我的菜单栏代码

<ul id="sddm" style="width:420px;margin:0 auto"> 
    <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Test</a> 
     <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> 
     <a href="#" OnClick="MyFunction();">One</a> 
     <a href="#">Two</a> 
     <a href="#">Three</a> 
     </div> 
    </li>

这是样式表我使用目前

#sddm 
{ margin: 0; 
    padding: 0; 
    z-index: 30} 

#sddm li 
{ margin: 0; 
    padding: 0; 
    list-style: none; 
    float: left; 
    font: bold 11px arial} 

#sddm li a 
{ display: block; 
    margin: 0 1px 0 0; 
    padding: 4px 10px; 
    width: 60px; 
    background: #5970B2; 
    color: #FFF; 
    text-align: center; 
    text-decoration: none} 

#sddm li a:hover 
{ background: #49A3FF} 

#sddm div 
{ position: absolute; 
    visibility: hidden; 
    margin: 0; 
    padding: 0; 
    background: #EAEBD8; 
    border: 1px solid #5970B2} 

    #sddm div a 
    { position: relative; 
     display: block; 
     margin: 0; 
     padding: 5px 10px; 
     width: auto; 
     white-space: nowrap; 
     text-align: left; 
     text-decoration: none; 
     background: #EAEBD8; 
     color: #2875DE; 
     font: 11px arial} 

    #sddm div a:hover 
    { background: #49A3FF; 
     color: #FFF}

请帮

来源

2011-04-08 Kiran

介意如果我介绍你jQuery的解决方案？ – 2011-04-08 06:36:02

没有问题，至少应该起作用。 – Kiran 2011-04-08 06:37:28

看起来像你有很糟糕的菜单（HTML），只是检查更新，并修改它。 – 2011-04-08 06:46:26

类似的工作代码

<style> 
#sddm li.ch{ 
     background: url('remove.png') no-repeat; 
} 
</style> 
    <script src="jquery.js"></script> 
    <script> 
     $(function(){ 
      $('#sddm li').click(function(){ 
       if($(this).hasClass('ch')){ 
         $(this).removeClass('ch'); 
       } 
       else{ 
         $(this).addClass('ch'); 
       } 
      }) 
     }) 
    </script> 
<ul id="sddm" style="width:420px;margin:0 auto"> 
    <li><a href="#">Test 1</a></li> 
    <li><a href="#">Test 2</a></li> 
    <li><a href="#">Test 3</a></li> 
</ul>

你呢r图像

来源

2011-04-08 06:38:39

非常感谢你，这里的警报被称为点击菜单项，但代码不工作（我的意思是在菜单项上添加刻度标记图像）这是我的代码：$（function（）{ \t \t \t \t $（ '＃SDDM礼'）点击（函数（）{ \t \t \t \t \t \t警报（ 'DDD'）;如果（$（本）.hasClass（ 'CH'））{ $（this）.removeClass（'ch'）; } else { $（this）.addClass（'ch'）; } }） }） \t \t #li { 背景：网址（ 'http://www.incorporate.net.au/incprod/images/tick_icon.gif'）不重复; } – Kiran 2011-04-08 08:22:41

You have forcefully made the code accepted :) , Any help why this not displaying an Image beside the Menu Item 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 


    <script type="text/javascript"> 

     $(function(){ 


      $('#sddm li').click(function(){ 




       if($(this).hasClass('ch')){ 
         $(this).removeClass('ch'); 
       } 
       else{ 
         $(this).addClass('ch'); 
       } 
      }) 
     }) 



    </script> 

</head> 
<body> 





    <!-- body --> 
    <div id="center"> 



<!-- dd menu --> 
<script type="text/javascript"> 
<!-- 
var timeout   = 500; 
var closetimer  = 0; 
var ddmenuitem  = 0; 

// open hidden layer 
function mopen(id) 
{ 
    // cancel close timer 
    mcancelclosetime(); 

    // close old layer 
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; 

    // get new layer and show it 
    ddmenuitem = document.getElementById(id); 
    ddmenuitem.style.visibility = 'visible'; 

} 
// close showed layer 
function mclose() 
{ 
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; 
} 

// go close timer 
function mclosetime() 
{ 
    closetimer = window.setTimeout(mclose, timeout); 
} 

// cancel close timer 
function mcancelclosetime() 
{ 
    if(closetimer) 
    { 
     window.clearTimeout(closetimer); 
     closetimer = null; 
    } 
} 


</script> 
<style> 
#sddm 
{ margin: 0; 
    padding: 0; 
    z-index: 30} 

#sddm li 
{ margin: 0; 
    padding: 0; 
    list-style: none; 
    float: left; 
    font: bold 11px arial} 

#sddm li a 
{ display: block; 
    margin: 0 1px 0 0; 
    padding: 4px 10px; 
    width: 60px; 
    background: #5970B2; 
    color: #FFF; 
    text-align: center; 
    text-decoration: none} 

#sddm li a:hover 
{ background: #49A3FF} 

#sddm div 
{ position: absolute; 
    visibility: hidden; 
    margin: 0; 
    padding: 0; 
    background: #EAEBD8; 
    border: 1px solid #5970B2} 

    #sddm div a 
    { position: relative; 
     display: block; 
     margin: 0; 
     padding: 5px 10px; 
     width: auto; 
     white-space: nowrap; 
     text-align: left; 
     text-decoration: none; 
     background: #EAEBD8; 
     color: #2875DE; 
     font: 11px arial} 

    #sddm div a:hover 
    { background: #49A3FF; 
     color: #FFF} 



     #ch{ 
background: url('http://www.incorporate.net.au/incprod/images/tick_icon.gif') no-repeat; 
} 




</style> 


<!-- div class="sample" style="margin-bottom: 15px;height:42px;"><span --> 
<ul id="sddm" style="width:420px;margin:0 auto"> 
    <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Test</a> 
     <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> 
     <a href="#" id="kii" >Hide All</a> 
     <a href="#" OnClick="MyFunction();" >Show All</a> 
     <a href="#" id="Oner" OnClick="MyFunction();" >One</a> 
     <a href="#" OnClick="MyFunction();" >Two</a> 
     </div> 
    </li> 


</ul> 



<div id="one" style="visibility:hidden" > 

     <LABEL FOR=user style="width:420px;margin:0 auto" ACCESSKEY=U>Google Search Bar :</LABEL> 

<div> 


<div id="two" style="visibility:hidden" > 

     <LABEL FOR=user style="width:420px;margin:0 auto" ACCESSKEY=U>Map Type control:</LABEL> 

<div> 

<div id="three" style="visibility:hidden" > 

     <LABEL FOR=user style="width:420px;margin:0 auto" ACCESSKEY=U>Zoom Control :</LABEL> 

<div> 


<div id="four" style="visibility:hidden" > 

     <LABEL FOR=user style="width:420px;margin:0 auto" ACCESSKEY=U>Latitude/Longitude Display:</LABEL> 

<div> 




</body> 
</html>

来源

2011-04-08 08:40:18 Kiran

的Javascript菜单栏与菜单项

回答

相关问题