저도 궁금한 사항이라 질문해 봅니다.
질문자 원 소스 :
https://codepen.io/hungry2s/pen/LYYPyQY
현재 구조 알기 쉽게 테두리선 넣은 소스
https://codepen.io/sinbi/pen/MWWgoad
질문자가 알고 싶단 내용은 대충 아래와 같습니다.
1. 생성버튼 클릭 때마다 고유아이디 갖는 버튼 계속 생성.
2. 생성되면서 X축 하단 스크롤바 자동 생성. (가로로 쭉 생성)
3. x 버튼 누르면 생성된 탭 삭제
궁금해서 묻는 것이니, 바쁘신 분들은 그냥 패스해주시고,
저처럼 지적 호기심이 왕성한 분들만 고민해봐 주세요 ^^
답변 2개 / 댓글 4개
채택된 답변
+20 포인트
2019-10-04 (금) 09:11:50
.scroll_view_tabbar {
width:300px;
height:30px;
display:inline-block;
float:left;
overflow-y:hidden;
overflow-x:auto;
white-space:nowrap;
}
.tab_btn_div {
width:100px;
height:30px;
display:inline-block;
}
답변에 대한 댓글 3개
2019-10-04 (금) 10:59:51
[code]
<script>
var i = 0;
function push_button(){
var addedTabDiv = document.getElementById("scroll_view_tabbar");
var tab_code = "";
tab_code += "<input type='button' id='tab_btn-" + i + "' class='tab_btn' value='탭버튼' />";
tab_code += "<input type='button' id='tab_btn-" + i + "-x' class='tab_btn_x' value='X' onclick='aaa(this)' />";
i++;
var addedTab = document.createElement("div");
addedTab.id = "tab_btn_div";
addedTab.className = "tab_btn_div";
addedTab.innerHTML = tab_code;
addedTabDiv.appendChild(addedTab);
}
function aaa(obj) {
obj.parentElement.remove();
}
</script>
[/code]
삭제하는 거랑 id는 빼고 썼네요.
<script>
var i = 0;
function push_button(){
var addedTabDiv = document.getElementById("scroll_view_tabbar");
var tab_code = "";
tab_code += "<input type='button' id='tab_btn-" + i + "' class='tab_btn' value='탭버튼' />";
tab_code += "<input type='button' id='tab_btn-" + i + "-x' class='tab_btn_x' value='X' onclick='aaa(this)' />";
i++;
var addedTab = document.createElement("div");
addedTab.id = "tab_btn_div";
addedTab.className = "tab_btn_div";
addedTab.innerHTML = tab_code;
addedTabDiv.appendChild(addedTab);
}
function aaa(obj) {
obj.parentElement.remove();
}
</script>
[/code]
삭제하는 거랑 id는 빼고 썼네요.
sinbi
2019-10-04 (금) 11:08:00
오~~~~~~~~ 호 ~~~~~~~~~~~
감탄.. ( ^ _________ ^ ) =====b
오늘은 종일 이거 공부해야 겠어요.
감탄.. ( ^ _________ ^ ) =====b
오늘은 종일 이거 공부해야 겠어요.
2019-10-04 (금) 08:29:38
onclick="javascript:a('변수');" //생성전달
function
<div id="변수">// 받은 변수로 html 생성
삭제는 역으로 하면 됩니다.
답변에 대한 댓글 1개
sinbi
2019-10-04 (금) 10:40:34
tab_code += "<input type='button' id='tab_btn_x' class='tab_btn_x' value='X' onclick="removeTab()" />";
생성되는 X 버튼에 onclick="removeTab()" 넣어주면 버튼 생성조차 안 되네요.ㅜㅜ
그래서, 말씀해주신 방법은 못 써먹을 것 같아요.
이벤트리스터 방식을 써줘야 할 것 같아요.
생성되는 X 버튼에 onclick="removeTab()" 넣어주면 버튼 생성조차 안 되네요.ㅜㅜ
그래서, 말씀해주신 방법은 못 써먹을 것 같아요.
이벤트리스터 방식을 써줘야 할 것 같아요.
답변을 작성하려면 로그인이 필요합니다.