탭 클릭했을 때 점프

Question

내가 겪고있는 문제는 탭을 클릭하여 활성화했을 때 화면이 맨 위로 이동한다는 것입니다. 이드가 목표로 삼는 것은 시작이라고 말할 수 있지만이 문제를 해결하는 방법을 너무 확신 할 수는 없습니다.

다른 요소를 타겟팅 할 수 있습니까?

<style type="text/css"> 
    /*----- Tabs -----*/ 
.tabs { 
    width:100%; 
    display:inline-block; 
} 

    /*----- Tab Links -----*/ 
    /* Clearfix */ 
    .tab-links:after { 
     display:block; 
     clear:both; 
     content:''; 
    } 

    .tab-links li { 
     margin:0px 5px; 
     float:left; 
     list-style:none; 
    } 

     .tab-links a { 
      padding:9px 15px; 
      display:inline-block; 
      border-radius:3px 3px 0px 0px; 
      background:#7FB5DA; 
      font-size:16px; 
      font-weight:600; 
      color:#4c4c4c; 
      transition:all linear 0.15s; 
     } 

     .tab-links a:hover { 
      background:#a7cce5; 
      text-decoration:none; 
     } 

    li.active a, li.active a:hover { 
     background:#fff; 
     color:#4c4c4c; 
    } 

    /*----- Content of Tabs -----*/ 
    .tab-content { 
     padding:15px; 
     border-radius:3px; 
     box-shadow:-1px 1px 1px rgba(0,0,0,0.15); 
     background:#fff; 
    } 

     .tab { 
      display:none; 
     } 

     .tab.active { 
      display:block; 
     } 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.tabs .tab-links a').on('click', function(e) { 
      var currentAttrValue = $(this).attr('href'); 

      // Show/Hide Tabs 
      $('.tabs ' + currentAttrValue).slideDown(600).show().siblings().hide(); 

      // Change/remove current tab to active 
      $(this).parent('li').addClass('active').siblings().removeClass('active'); 

      e.preventDefault(); 
     }); 
    });  
</script> 
<div class="tabs"> 
    <ul class="tab-links"> 
     <li class="active"><a href="#tab1">Tab #1</a></li> 
     <li><a href="#tab2">Tab #2</a></li> 
     <li><a href="#tab3">Tab #3</a></li> 
     <li><a href="#tab4">Tab #4</a></li> 
    </ul> 

    <div class="tab-content"> 
     <div id="tab1" class="tab active"> 
      <p>Tab #1 content goes here!</p> 
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p> 
     </div> 

     <div id="tab2" class="tab"> 
      <p>Tab #2 content goes here!</p> 
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p> 
     </div> 

     <div id="tab3" class="tab"> 
      <p>Tab #3 content goes here!</p> 
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p> 
     </div> 

     <div id="tab4" class="tab"> 
      <p>Tab #4 content goes here!</p> 
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p> 
     </div> 
    </div> 
</div> 

Answer 1

나는 하나 개 솔루션 분명히 여전히 같은있다 대안 ", 아이디의 대상"이 탭의이되고 있기 때문 "화면 상단으로 이동합니다"고 말할 때 당신이 무슨 말을하는지 이해한다면 문제 (!)는 탭 자체에 대한 링크 이외의 것을 사용하는 것입니다. 예를 들어 라디오 버튼 (또는 확인란)을 사용하여 동일한 효과를 얻을 수 있습니다. 여기에 내가 매우 빨리 기초로 코드를 사용하여 함께 던졌다 바이올린 (I 빨리 함께 던졌다 때문에, 그것은 완벽하게 작동하지 않을 수 있습니다,하지만 당신에게 기본 아이디어를 줄 것이다)의 : 기본적으로

http://jsfiddle.net/hewa29nt/2/

당신의 목록 항목은 다음과 같이 보일 것이다 : 당신은 다음을 사용할 수

<li> 
     <input type="radio" checked name="tabs" id="tab1"> 
     <label for="tab1">Tab #1</label> 
    </li> 

: 스타일 변경 : (링크 활성이 아닌) 의사 클래스를 확인했습니다. 유일한 문제는 이것이 IE8 (지원하지 않는 : checked)에서 작동하지 않는다는 것입니다. 따라서 IE8을 염려한다면 조건부 주석과 해당 브라우저의 원래 링크 기반 코드를 사용할 수 있습니다.

당신이 관심이 있다면 당신은 또한이 게시물의 끝에 시나리오 이런 종류의에서 IE8에 대한 옵션의 논의를 볼 수 있습니다

:

http://www.ascendiv.com/pure-css-tabs-demystified-and-slightly-improved-or-pure-css-tabs-even-in-ie8/

편집 해당 게시물의 끝에서^을 사용하는 방법에 대한 설명이 있습니다. 대신 번으로 가져 가세요. 그 일을하는 것은 이 실제로는이 점프를 제거 할 수있는 방법 중 하나입니다. 탭을 클릭하는 것보다는 커서를 가리키면 탭을 탐색 할 수 있지만 원하는 것이 있는지 여부는 확실하지 않습니다.