javascript経由でリンクを動的に変更するにはどうすればよいですか？

以下この質問のために簡略化されたコンテキストメニューを書きました。コンテキストメニューは、マウスの位置を決定し、メニューの左と上に配置することによって機能します。ここでは、複数の右クリック可能なオブジェクトのコンテキストメニューの1つで、コンテキストメニューのリンクを動的にするにはどのようにすればよいのかという疑問があります。それらは、リンク1,2または3がクリックされたかどうかに基づいて変更する必要があります。一例として、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; 
    }

、どのように（プレーンJavaScriptを使用しては）/両方のリンク」タスクになるだろう4/'と'/task/5 /リンク3をクリックすると、 'タスク'/4/3/'と' /タスク/ 5/3 'が読み込まれますか？

PS：リンク1,2,3は動的なので、/ task/4と/ task/5も同じでなければなりません。

任意およびすべてのヘルプは

出典

2016-10-19 John the User

を理解されるであろう、この質問を参照してくださいhttp://stackoverflow.com/questions/4365246/how-to-change-href-of- a-tag-on-button-through-javascript –

リンク1,2,3のhrefを関数のidとして渡すことができます： 'function ShowMenu（control、e、id）{...' like 'ShowMenu（ 'contextMenu'、event、 '1'）;' _contextMenu_ div内のリンクにidを追加します。 –

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>

出典

2016-10-19 07:34:18 Weedoze

javascript経由でリンクを動的に変更するにはどうすればよいですか？

答えて

関連する問題