-4
안녕하세요 확장 가능한 탭에 더하기 및 빼기 아이콘을 추가하고 싶습니다. 이것은 내가 무엇을 가지고 내가 탭을 클릭 인 경우 아이콘을 대체하기 위해 CSS 나 자바 스크립트를 사용하여 생각하지만 난 어떻게내 메뉴 탭에 + 및 -를 추가하는 방법
대해 이동하는 아무 생각이 지금까지 HTML
<h1>Responsive Tabs</h1>
<div class="tabBox">
<ul class="tabs">
<li><a href="#tab1">Test1</a>
</li>
<li><a href="#tab2">Test2</a>
</li>
<li><a href="#tab3">Test3</a>
</li>
</ul>
<div class="tabContainer"> <a onclick="toggle('tab1');" href="#tab1">Test1</a>
<div id="tab1" class="tabContent" style="display:none;">Test1</div>
<a onclick="toggle('tab2');" href="#tab2">Test2</a>
<div id="tab2" class="tabContent" style="display:none;">Test2</div>
<a onclick="toggle('tab3');" href="#tab3">Test3</a>
<div id="tab3" class="tabContent" style="display:none;">Test3</div>
</div>
</div>
자바 스크립트
내 jfiddle에있는 $(".tabContent").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tabContent:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tabContent").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
function toggle(target) {
var artz = document.getElementsByClassName('tabContent');
var targ = document.getElementById(target);
var isVis = targ.style.display == 'block';
// hide all
for (var i = 0; i < artz.length; i++) {
artz[i].style.display = 'none';
}
// toggle current
targ.style.display = isVis ? 'none' : 'block';
return false;
}
나머지 : http://jsfiddle.net/Jnewguy/5B5KJ/63/
감사합니다. 잘 작동하지만 탭을 열면 어떻게 다시 닫을 수 있습니까? 열린 탭을 닫으려면 다른 탭을 클릭해야하기 때문에 – user2809321
여기 jquery 클릭 이벤트가 업데이트되었습니다. 내가 한 일은 클릭 한 탭에 특정 '열린'클래스를 추가하여 일종의 부울 플래그를 설정하는 것입니다. 그런 다음 click 이벤트에서이 특정 요소에이 클래스가 추가되었는지 확인합니다. true이면 현재 열려있는 내용 패널을 닫습니다. 그렇지 않으면 이전에와 마찬가지로 새 패널을 열고 다른 모든 패널을 닫습니다. [업데이트 된 jsfiddle] (http://jsfiddle.net/5B5KJ/69/) – IndieRok