자바스크립트 질문
본문
안녕하세요.
아래처럼 클릭 하면 탭이 넘어가는 소스를 구현중인데요
2초 뒤에 탭이 자동으로 바뀌게끔 하고 싶은데
자바스크립트쪽에서...
통 먹히지를 않네요.;;
염치 무릅쓰고 질문 드립니다. 도와주십시오 ㅠ
CSS부분은 뺐습니다.
<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
<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초에 한번씨 다음 텝 누릅니다. 마지막이면 처음으로 돌아 갑니다.
헉 정말 감사합니다.
이정도 까지 해주시다니요...ㅠㅠ
고맙습니다.
공부가 많이 되었습니다!!
var active=false; 얘는 남기고
if문 안에 active=false; 는 지워도 될꺼 같네요.
막 짜다 보니깐 쓸데 없는 소스도 막 적었네요.
// 아니네요. 그냥 두세요........
안돼네요 ㅋㅋㅋㅋㅋㅋ
혹시 더 염치없지만...ㅎ
해당 탭에 마우스를 올려놓고 있을때는
슬라이드가 되지 않도록 하려면
어덯게 해야 할까요..
힌트만 주시면 제가 알아서 해보도록 하겠습니다 !!
아래 답변 추가 했어요.
<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>
정말 감사합니다^^
setInterval 함수에 대해 처음 알았는데
많은 도움 받고 갑니다!
정말 정말 정말 매우 매우 감사드려용!!!!! ♡
답변을 작성하시기 전에 로그인 해주세요.
