Wie ändere ich den Link dynamisch via Javascript?

Unten habe ich ein vereinfachtes Kontextmenü für die Zwecke dieser Frage geschrieben. Das Kontextmenü funktioniert, indem Sie die Position der Maus bestimmen und diese dann links und oben im Menü auswählen. Hierin liegt die Frage, da es ein Kontextmenü für mehrere rechtsklickbare Objekte ist, wie mache ich die Links im Kontextmenü dynamisch. Sie sollten sich ändern, je nachdem, ob auf Link 1, 2 oder 3 geklickt wurde.Wie ändere ich den Link dynamisch via Javascript?

HTML

<body oncontextmenu="return false"> 
<div class="menuActive"> 
    <div> 
     <a href="1" oncontextmenu="ShowMenu('contextMenu',event);">1. This is an item to be right clicked</a> 
    </div> 
    <div> 
     <a href="2" oncontextmenu="ShowMenu('contextMenu',event);">2. This is an item to be right clicked</a> 
    </div> 
    <div> 
     <a href="3" oncontextmenu="ShowMenu('contextMenu',event);">3. This is an item to be right clicked</a> 
    </div> 
    <div style="display:none;" id="contextMenu"> 
     <a href="/task/4">Task 1: This link should be a dynamic based on click</a> 
     <a href="/task/5">Task 2: This link should be a dynamic based on click</a> 
    </div> 
</div>

JavaScript

function ShowMenu(control, e) { 
     var posx = e.clientX +window.pageXOffset +'px'; //Left Position of Mouse Pointer 
     var posy = e.clientY + window.pageYOffset + 'px'; //Top Position of Mouse Pointer 
     document.getElementById(control).style.position = 'absolute'; 
     document.getElementById(control).style.display = 'inline'; 
     document.getElementById(control).style.left = posx; 
     document.getElementById(control).style.top = posy;   
}

CSS

a { 
    display: block; 
    height: 20px; 
    background-color: #fff; 
    padding: 10px; 
    }

Als Beispiel Wie würde ich (mit Klar Javascript), die beide Aufgabe‘Links machen/4/'und'/Aufgabe/5/'lese' Aufgabe/4/3/'und'/Aufgabe/5/3 '' wenn Link 3 angeklickt wird?

PS: Link 1, 2 und 3 sind dynamisch und daher sollten/task/4 und/task/5 auch sein.

wird Jedwedes Hilfe

Quelle

2016-10-19 John the User

Sie bitte auf diese Frage beziehen geschätzt werden http://stackoverflow.com/questions/4365246/how-to-change-href-of- a-tag-on-button-click-through-javascript –

Sie könnten die href der Links 1,2,3 als ID in Ihrer Funktion übergeben: 'function ShowMenu (control, e, id) {...' like 'ShowMenu ('contextMenu', event, '1');' und fügen Sie die ID den Links im _contextMenu_ div hinzu. –

function ShowMenu(control, e) { 
 
     var newRef = e.toElement.href.slice(-1); 
 
     var items = document.getElementById("contextMenu").children; 
 
     for(var i=0; i<items.length;i++){ 
 
     if(items[i].tagName == "A"){ 
 
      items[i].href = "/task/" + newRef; 
 
     } 
 
     } 
 
     
 
     console.log(items);  
 
    
 
     var posx = e.clientX +window.pageXOffset +'px'; //Left Position of Mouse Pointer 
 
     var posy = e.clientY + window.pageYOffset + 'px'; //Top Position of Mouse Pointer 
 
     document.getElementById(control).style.position = 'absolute'; 
 
     document.getElementById(control).style.display = 'inline'; 
 
     document.getElementById(control).style.left = posx; 
 
     document.getElementById(control).style.top = posy;   
 
}

a { 
 
    display: block; 
 
    height: 20px; 
 
    background-color: #fff; 
 
    padding: 10px; 
 
    }

<body oncontextmenu="return false"> 
 
<div class="menuActive"> 
 
    <div> 
 
     <a href="1" oncontextmenu="ShowMenu('contextMenu',event);">1. This is an item to be right clicked</a> 
 
    </div> 
 
    <div> 
 
     <a href="2" oncontextmenu="ShowMenu('contextMenu',event);">2. This is an item to be right clicked</a> 
 
    </div> 
 
    <div> 
 
     <a href="3" oncontextmenu="ShowMenu('contextMenu',event);">3. This is an item to be right clicked</a> 
 
    </div> 
 
    <div style="display:none;" id="contextMenu"> 
 
     <a href="/task/4">Task 1: This link should be a dynamic based on click</a> 
 
     <a href="/task/5">Task 2: This link should be a dynamic based on click</a> 
 
    </div> 
 
</div>

Quelle

2016-10-19 07:34:18 Weedoze

Wie ändere ich den Link dynamisch via Javascript?

Antwort

Verwandte Themen