버튼 클릭 후 url 부분 변경

다음과 같은 상황이 있습니다. 두 개의 카테고리와 링크 목록이 있습니다.버튼 클릭 후 url 부분 변경

이제 카테고리에 따라 URL의 일부를 변경해야합니다. 따라서 2 개의 버튼을 사용하여 카테고리를 전환하십시오. 범주 A가 기본값입니다.

<button id="Tab1">CategoryA</button> 
<button id="Tab2">CategoryB</button> 

<a id="link" href="http://www.test.com/CategoryA/Type1" target="_blank">Type1</a> 
<a id="link" href="http://www.test.com/CategoryA/Type2" target="_blank">Type2</a> 
<a id="link" href="http://www.test.com/CategoryA/Type3" target="_blank">Type3</a>

URL 구조 내에서 버튼을 클릭 한 항목에 따라 카테고리 부분 만 달라야합니다. URL 변경이 즉시 발생하므로 자바 스크립트로 변경하려고합니다.

는

$('#Tab1').on ('click', function (e) { 
     link.href.replace....

같은 물건을 시도하지만 그것으로 운이 없었다. 일부

출처

2014-07-10 user1786096

게시 대답. 네가 찾고있는 것이 아닌지 알려주지. – AndrewPolland

대단히 감사합니다! – user1786096

문제 없습니다. 그것이 당신의 문제를 해결했다면, 대답의 왼쪽에있는 체크를 클릭하여 받아 들일 수있는대로 내 대답을 표시하는 것이 좋겠습니까. 감사. – AndrewPolland

을 도울 수 있다면

당신은 jQuery를 사용하고있는 것으로 보인다 좋을 것인가, 그래서 여기에 jQuery를 솔루션입니다.

jQuery의 .each()을 사용하여 각 링크를 반복하고 href을 얻고 범주를 바꾸고 새로운 href을 설정할 수 있습니다.

id을 반복 할 수 없으므로 클래스로 변경했습니다. 여기에 코드가 있습니다.

$('#Tab1').on('click', function (e) { 
    $(".link").each(function(index) { 
     var newLink=$(this).attr("href").replace("CategoryB","CategoryA"); 
     $(this).attr("href", newLink); 
    }); 
}); 

$('#Tab2').on('click', function (e) { 
    $(".link").each(function(index) { 
     var newLink=$(this).attr("href").replace("CategoryA","CategoryB"); 
     $(this).attr("href", newLink); 
    }); 
});

여기에 업데이트 된 html 코드가 있습니다. 단지 id가 클래스로 변경되었습니다.

<button id="Tab1">CategoryA</button> 
<button id="Tab2">CategoryB</button> 

<a class="link" href="http://www.test.com/CategoryA/Type1" target="_blank">Type1</a> 
<a class="link" href="http://www.test.com/CategoryA/Type2" target="_blank">Type2</a> 
<a class="link" href="http://www.test.com/CategoryA/Type3" target="_blank">Type3</a>

는 다음 작업을 보여주는 jsfiddle입니다 : http://jsfiddle.net/QaJS9/1/

내가 당신을 도와해야한다고 생각

출처

2014-07-10 14:09:32 AndrewPolland

버튼 클릭 후 url 부분 변경

답변

관련 문제