12/21 회고

var newListItem = $("<li>");

// 새로운 항목에 적용할 내용 설정
var newLink = $("<a>").attr("href", "연결될_하이퍼링크").text("추가된_탭_명");
newListItem.append(newLink);

// .sample .tab ul에 새로운 항목 추가
$(".sample ul").append(newListItem);

newListItem.click(function(){
	// .sample_under 숨김
	$(".sample_under").hide();

	// 다른 탭 컨텐츠를 표시 (예: .legendTab)
    $(".legendTab").show();
});

하이퍼링크가 없이 ""로 공백만 되어있으면 기본적으로 새로고침이 일어난다.

하지만 원하는 기능에서는 새로고침이 일어나면 안된다. 그래서 click이벤트 발생시 아래 코드를 추가했다.

event.preventDefault();

 

// newListItem클릭 이벤트시
	// .cancerDataDetailCategory의 모든 li 요소들에서 'on' 클래스 제거
    $(".cancerDataDetailCategory li").removeClass("on");

    // .cancerDataDetailCategory의 마지막 li 요소에만 'on' 클래스 추가
    $(".cancerDataDetailCategory li").last().addClass("on");

    // .cancerDataDetail을 숨김
    $(".cancerDataDetail .tab li").removeClass("on");