JAVASCRIPT 관련 질문 받았는데, 채택완료
저도 궁금한 사항이라 질문해 봅니다.
질문자 원 소스 :
https://codepen.io/hungry2s/pen/LYYPyQY">https://codepen.io/hungry2s/pen/LYYPyQY
현재 구조 알기 쉽게 테두리선 넣은 소스
https://codepen.io/sinbi/pen/MWWgoad">https://codepen.io/sinbi/pen/MWWgoad
질문자가 알고 싶단 내용은 대충 아래와 같습니다.
1. 생성버튼 클릭 때마다 고유아이디 갖는 버튼 계속 생성. 2. 생성되면서 X축 하단 스크롤바 자동 생성. (가로로 쭉 생성) 3. x 버튼 누르면 생성된 탭 삭제
궁금해서 묻는 것이니, 바쁘신 분들은 그냥 패스해주시고,
저처럼 지적 호기심이 왕성한 분들만 고민해봐 주세요 ^^
답변 2개
.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개
<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는 빼고 썼네요.
감탄.. ( ^ _________ ^ ) =====b
오늘은 종일 이거 공부해야 겠어요.
댓글을 작성하려면 로그인이 필요합니다.
onclick="javascript:a('변수');" //생성전달
function
삭제는 역으로 하면 됩니다.
답변에 대한 댓글 1개
생성되는 X 버튼에 onclick="removeTab()" 넣어주면 버튼 생성조차 안 되네요.ㅜㅜ
그래서, 말씀해주신 방법은 못 써먹을 것 같아요.
이벤트리스터 방식을 써줘야 할 것 같아요.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인