최신글 탭 링크 앵커관련 질문입니다. 정보
최신글 탭 링크 앵커관련 질문입니다.본문
안녕하세요? 최신그룹탭을 이용하다가 질문이 있어 이렇게 글을 씁니다.
최신글 불러오기로 그룹탭 네이버형식을 이용하는데요.
탭을 이동할때마다 페이지가 최상단으로 이동하게 되어 접근성이 매우 열악해졌습니다.
<a href="#"> 로 탭을 지정해주었는데요.
#로 링크하면 특성상 상단으로 이동되면서 탭이 변경되는걸로 알고 있습니다.
이걸 앵커가 되게 하려면 어떻게 해야할지 고수분들께 질문드립니다.
꼭 좀 도와주셨으면 합니다.
원본 소스는 이렇습니다. 소중한 답변 기다리겠습니다 -- __
<div style="height:106px" class="tab_list m1">
<ul>
<?
for($m=0; $m<count($gr_id); $m++) {
$num = $m+1;
?>
<li class="m<?=$num?>">
<a href="#" jquery16408452460570924265="<?=$num?>">
<span><?=$gr[$m][gr_subject]?></span>
</a>
<ul>
<?
$empty_row = $rows - count($list[$m]);
for($n=0; $n<count($list[$m]); $n++) {
echo "<li>";
echo "<a class=\"board\" href=\"{$g4[bbs_path]}/board.php?bo_table={$list[$m][$n][bo_table]}\">[{$list[$m][$n][bo_subject]}] </a>";
echo "<a href=\"{$list[$m][$n]['href']}\">{$list[$m][$n][subject]}</a>";
echo "<span class=\"datetime\">{$list[$m][$n][datetime2]}</span>";
/* 아이콘 사용시 본 주석을 삭제하고, 활성화 시켜주세요.
echo " " . $list[$m][$n]['icon_new'];
echo " " . $list[$m][$n]['icon_file'];
echo " " . $list[$m][$n]['icon_link'];
echo " " . $list[$m][$n]['icon_hot'];
echo " " . $list[$m][$n]['icon_secret'];
*/
echo "</li>";
}
for($l=0; $l<$empty_row; $l++) {
echo "<li> <a href='#'>".$gr[$m][gr_subject]."탭의 최신글이 더 없습니다.</a></li>";
}
?>
<li class="more"> <a href="#">더보기</a>
</li>
</ul>
</li>
<? } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(function($){
var tab = $('.tab_list');
tab.removeClass('js_off');
tab.css('height', tab.find('>ul>li>ul:visible').height()+40);
function onSelectTab(){
var t = $(this);
var myClass = t.parent('li').attr('class');
t.parents('.tab_list:first').attr('class', 'tab_list '+myClass);
tab.css('height', t.next('ul').height()+40);
}
tab.find('>ul>li>a').click(onSelectTab).focus(onSelectTab);
});
</script>
최신글 불러오기로 그룹탭 네이버형식을 이용하는데요.
탭을 이동할때마다 페이지가 최상단으로 이동하게 되어 접근성이 매우 열악해졌습니다.
<a href="#"> 로 탭을 지정해주었는데요.
#로 링크하면 특성상 상단으로 이동되면서 탭이 변경되는걸로 알고 있습니다.
이걸 앵커가 되게 하려면 어떻게 해야할지 고수분들께 질문드립니다.
꼭 좀 도와주셨으면 합니다.
원본 소스는 이렇습니다. 소중한 답변 기다리겠습니다 -- __
<div style="height:106px" class="tab_list m1">
<ul>
<?
for($m=0; $m<count($gr_id); $m++) {
$num = $m+1;
?>
<li class="m<?=$num?>">
<a href="#" jquery16408452460570924265="<?=$num?>">
<span><?=$gr[$m][gr_subject]?></span>
</a>
<ul>
<?
$empty_row = $rows - count($list[$m]);
for($n=0; $n<count($list[$m]); $n++) {
echo "<li>";
echo "<a class=\"board\" href=\"{$g4[bbs_path]}/board.php?bo_table={$list[$m][$n][bo_table]}\">[{$list[$m][$n][bo_subject]}] </a>";
echo "<a href=\"{$list[$m][$n]['href']}\">{$list[$m][$n][subject]}</a>";
echo "<span class=\"datetime\">{$list[$m][$n][datetime2]}</span>";
/* 아이콘 사용시 본 주석을 삭제하고, 활성화 시켜주세요.
echo " " . $list[$m][$n]['icon_new'];
echo " " . $list[$m][$n]['icon_file'];
echo " " . $list[$m][$n]['icon_link'];
echo " " . $list[$m][$n]['icon_hot'];
echo " " . $list[$m][$n]['icon_secret'];
*/
echo "</li>";
}
for($l=0; $l<$empty_row; $l++) {
echo "<li> <a href='#'>".$gr[$m][gr_subject]."탭의 최신글이 더 없습니다.</a></li>";
}
?>
<li class="more"> <a href="#">더보기</a>
</li>
</ul>
</li>
<? } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(function($){
var tab = $('.tab_list');
tab.removeClass('js_off');
tab.css('height', tab.find('>ul>li>ul:visible').height()+40);
function onSelectTab(){
var t = $(this);
var myClass = t.parent('li').attr('class');
t.parents('.tab_list:first').attr('class', 'tab_list '+myClass);
tab.css('height', t.next('ul').height()+40);
}
tab.find('>ul>li>a').click(onSelectTab).focus(onSelectTab);
});
</script>
댓글 전체