的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菜單欄與菜單項

回答

相關問題