탭 js와 높이 맞추는 js를 함께 사용할 순 없을까요?
본문
탭 js와 블럭 높이 맞추는 js를 함께 사용할 순 없을까요?
사용중인 js는 아래와 같습니다.
탭 js
$(".tab li").click(function () {
var num = $(".tab li").index(this);
$(".tabContent").removeClass('active');
$(".tabContent").eq(num).addClass('active');
$(".tab li").removeClass('active');
$(this).addClass('active')
});
블럭 높이 맞추는 js (https://github.com/to-r/jquery.heightLine.js)
(function (factory) {
if(typeof module === "object" && typeof module.exports === "object") {
factory(require("jquery"), window, document);
} else {
factory(jQuery, window, document);
}
}(function($, window, document, undefined) {
$.fn.heightLine = function(){
var target = this,fontSizeChangeTimer,windowResizeId= Math.random();
var heightLineObj = {
op : {
"maxWidth" : 10000,
"minWidth" : 0,
"fontSizeCheck" : false
},
setOption : function(op){
this.op = $.extend(this.op,op);
},
destroy : function(){
target.css("height","");
},
create : function(op){
var self = this,
maxHeight = 0,
windowWidth = $(window).width();
self.setOption(op);
if( windowWidth<=self.op.maxWidth && windowWidth>=self.op.minWidth ){
target.each(function(){
if($(this).outerHeight()>maxHeight){
maxHeight = $(this).outerHeight();
}
}).each(function(){
var height = maxHeight
- parseInt($(this).css("padding-top"))
- parseInt($(this).css("padding-bottom"));
$(this).height(height);
});
}
},
refresh : function(op){
this.destroy();
this.create(op);
},
removeEvent :function(){
$(window).off("resize."+windowResizeId);
target.off("destroy refresh");
clearInterval(fontSizeChangeTimer);
}
}
if(typeof arguments[0] === "string" && arguments[0] === "destroy"){
target.trigger("destroy");
}else if(typeof arguments[0] === "string" && arguments[0] === "refresh"){
target.trigger("refresh");
}else{
heightLineObj["create"](arguments[0]);
$(window).on("resize."+windowResizeId,function(){
heightLineObj["refresh"]();
});
target.on("destroy",function(){
heightLineObj["removeEvent"]();
heightLineObj["destroy"]();
}).on("refresh",function(){
heightLineObj["refresh"]();
});
if(heightLineObj.op.fontSizeCheck){
if($("#fontSizeChange").length<=0){
var fontSizeChange = $("<span id='fontSizeChange'></span>").css({
width:0,
height:"1em",
position:"absolute",
left:0,
top:0
}).appendTo("body");
}
var defaultFontSize = $("#fontSizeChange").height();
fontSizeChangeTimer = setInterval(function(){
if(defaultFontSize != $("#fontSizeChange").height()){
heightLineObj["refresh"]();
}
},100);
}
}
return target;
}
}));
탭 전환으로 보여지는 컨텐츠를 달리 하고 있는데,
높이 맞추는 js를 사용할 시에 active된 탭 컨텐츠에는 적용이 되는데,
탭을 전환하면 높이가 0이 됩니다.
탭 전환시에도 높이를 맞추는 js를 사용할 수 있도록 할 수 있을까요?
위 내용만으로 해결할 수 있을까요?
html css부분도 올리는 것이 좋을까요?
답변 2
탭전환 스크립트안에 if문으로 높이맞추는쿼리를 추가하는건 어떤가요..?
예를들면
$(".tab li").click(function () {
var num = $(".tab li").index(this);
$(".tabContent").removeClass('active');
$(".tabContent").eq(num).addClass('active');
$(".tab li").removeClass('active');
$(this).addClass('active')
if(defined('.active')){function (factory) {
이런식으로 연결되게...?
아니면 블럭높이맞추는스크립트안에 difined로 무조건 액티브찾아서 바꾸게끔 만들거나....
미숙하지만 도움이되고싶네요...허허..
답변 감사합니다. 제가 js에 대해 무지한지라...(개발자가 아니어서여 ㅠㅠ)
있는 js 가져다 쓰는 것이 한계인 상황입니다 ㅠ ㅠ...
알려주셔도 직접 코드를 추가하거나 수정하는 것이 어려운 상태라 ㅋㅋ
부끄럽네요 ㅡ,. ㅡ
저도 미숙한실력으로 제가 직접 적용시켜보면서 하는게 아니다보니 이거로 될까?하는게 커요...ㅋㅋ
블럭맞추는 js 첫번째줄 위에
$(function() {
if(defined('.active')){
이거 추가하고 맨마지막에
};
});
추가하면 쿼리가 적용될공간에 .active가 있을때만 스크립트가 작용하는식이 될겁니다....(예상..)
블럭 맞추는 js는 다른 곳에서도 사용하기 땜에
직접적인 수정은 어렵네요 ㅠ ㅠ
아 .. 어렵네요 정말 ㅋㅋ 자바스크립트 공부 방법을 모르겠어요 ㅠ
단순 탭 전환시 높이가 0이 안되면 되는건가요?
블럭 높이 맞추는거랑 상관없이 아래처럼 하면 안되나요
<style>
.tab li{display:inline-block;}
.tabContent{display:none; height:100px; border:1px solid}
.active {display:block;}
</style>
<ul class="tab">
<li>111111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
<div class="tabContent active">
1
</div>
<div class="tabContent">
2
</div>
<div class="tabContent">
3
</div>
<div class="tabContent">
4
</div>
<script type="text/javascript">
$(".tab li").click(function () {
var num = $(".tab li").index(this);
$(".tabContent").removeClass('active');
$(".tabContent").eq(num).addClass('active');
$(".tab li").removeClass('active');
$(this).addClass('active')
});
</script>
tabContent 안에 ul>li>a 목록 컨텐츠가 있는데요...
a 태그(버튼)의 높이를 각각의 tabContent 별로 높이를 맞추려고 합니다.. ㅠㅠ
알려주신 tabContent 부분을 맞추려는 게 아니었어요 ㅠ ㅠ .. 흑흑...
제가 한글실력이 딸려 질문이 제대로 되어있는지 모르겠네요..,
컨텐츠 안에 리스트 목록(버튼)이 쭉 나열되어있는데,
이 버튼안의 텍스트가 짧은게 있고, 두줄이 되는 게 있고 해서 높이를 맞추려고 해요~ㅠ
음.. 소스나 이미지 같은 설명이 필요할 듯.. 한글이 어렵네요.
a 태그 각각의 높이를 일괄 동일하게 하려는 건지
아님 a 태그안의 텍스트 길이가 달라서 각 탭의 tabContent 높이를 맞추고 싶은건가요?
위에 github 에 있는 플러그인은 한글,일어는 되는데 영어에는 적용이 안되네요.
