안녕하세요.
아래처럼 클릭 하면 탭이 넘어가는 소스를 구현중인데요
2초 뒤에 탭이 자동으로 바뀌게끔 하고 싶은데
자바스크립트쪽에서...
통 먹히지를 않네요.;;
염치 무릅쓰고 질문 드립니다. 도와주십시오 ㅠ
CSS부분은 뺐습니다.
Copy
<script>
$(function () {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active").css("color", "#666");
$(this).addClass("active").css("color", "#000");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
});
setTimeout(activeTab, 2000);
</script>
<div>
<ul class="tabs">
<li class="active" rel="tab1">test1</li>
<li rel="tab2">test2</li>
<li rel="tab3">test3</li>
<li rel="tab4">test4</li>
</ul>
<div>
<div id="tab1" class="tab_content">
test1
</div>
<div id="tab2" class="tab_content">
test2
</div>
<div id="tab3" class="tab_content">
test3
</div>
<div id="tab4" class="tab_content">
test4
</div>
</div>
</div>답변 4개 / 댓글 5개
채택된 답변
+20 포인트
2018-07-13 (금) 16:41:48
Copy
<script>
$(function () {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active").css("color", "#666");
$(this).addClass("active").css("color", "#000");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
var total = $("ul.tabs li").length;
setInterval(function(){
var active=false;
$("ul.tabs li").each(function(index){
if(active){
$(this).click();
active=false;
return;
}
if($(this).attr("class")=="active"){
if(index+1 == total){
active=false;
$("ul.tabs li").first().click();
}else{
active=true;
}
}
});
}, 2000);
});
</script>다시 짜겠음. 원 소스가 아니라 파악이 덜됨
답변에 대한 댓글 2개
2018-07-13 (금) 17:27:31
Copy
<script>
$(function () {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active").css("color", "#666");
$(this).addClass("active").css("color", "#000");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
var start;
var total = $("ul.tabs li").length;
function startTab(){
start = setInterval(function(){
var active=false;
$("ul.tabs li").each(function(index){
if(active){
$(this).click();
active=false;
return;
}
if($(this).attr("class")=="active"){
if(index+1 == total){
active=false;
$("ul.tabs li").first().click();
}else{
active=true;
}
}
});
}, 2000);
}
$("ul.tabs li").mouseover(function(){
clearInterval(start);
});
$("ul.tabs li").mouseleave(function(){
startTab();
});
startTab();
});
</script>답변에 대한 댓글 1개
다나한포션
2018-07-13 (금) 17:34:56
정말 감사합니다^^
setInterval 함수에 대해 처음 알았는데
많은 도움 받고 갑니다!
정말 정말 정말 매우 매우 감사드려용!!!!! ♡
setInterval 함수에 대해 처음 알았는데
많은 도움 받고 갑니다!
정말 정말 정말 매우 매우 감사드려용!!!!! ♡
다나한포션
2018-07-13 (금) 17:14:44
혹시 더 염치없지만...ㅎ
해당 탭에 마우스를 올려놓고 있을때는
슬라이드가 되지 않도록 하려면
어덯게 해야 할까요..
힌트만 주시면 제가 알아서 해보도록 하겠습니다 !!
답변에 대한 댓글 1개
다나한포션
2018-07-13 (금) 17:12:03
헉 정말 감사합니다.
이정도 까지 해주시다니요...ㅠㅠ
고맙습니다.
공부가 많이 되었습니다!!
답변에 대한 댓글 1개
2018-07-13 (금) 17:16:27
var active=false; 얘는 남기고
if문 안에 active=false; 는 지워도 될꺼 같네요.
막 짜다 보니깐 쓸데 없는 소스도 막 적었네요.
// 아니네요. 그냥 두세요........
안돼네요 ㅋㅋㅋㅋㅋㅋ
if문 안에 active=false; 는 지워도 될꺼 같네요.
막 짜다 보니깐 쓸데 없는 소스도 막 적었네요.
// 아니네요. 그냥 두세요........
안돼네요 ㅋㅋㅋㅋㅋㅋ
답변을 작성하려면 로그인이 필요합니다.