list가 active되었을때 버튼이름 변경 및 리스트에 초점이 첫 번째로 가도록
본문
안녕하세요 질문 다시 드립니다.
이런 구조의 리스트가 있고
<ul>
<li class="active"><a href="javascript:void(0);" title="선택됨">전체</a>
<li class=""><a href="javascript:void(0);" title="">보도자료</a>
<li class=""><a href="javascript:void(0);" title="">행사정보</a>
</ul>
<div class="bx-controls bx-has-controls-direction"><div class="bx-controls-direction"><a class="bx-prev" href="javascript:void(0);">Prev</a><a class="bx-next" href="javascript:void(0);">Next</a></div></div>
이런 bx-slider 버튼이 있는데 a태그 안에 내용을
수정후
<div class="bx-controls bx-has-controls-direction"><div class="bx-controls-direction"><a class="bx-prev" href="javascript:void(0);">전체 게시판 이전</a><a class="bx-next" href="javascript:void(0);">전체 게시판 다음</a></div></div>
active되는 친구 이름으로 acitve게시판이름 + 게시판 이전
이런식으로 수정하고 싶은데 js실력이 모자라서 요청드립니다.
bx슬라이더라 소스를 긁어와도 넣을수가 없더라고요
가능할까요?
------------------------------------------------------------------------------------------------------------------
추가질문
추가적인 질문도 생겨서 드립니다.
구조 보여드리면서
질문 밑에 추가로 드립니다.
<div class="bx-wrapper" style="max-width: 1252px; margin: 0px auto;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 264px;"><ul class="brief-list" style="width: 1215%; position: relative; transition-duration: 0s; transform: translate3d(-1252px, 0px, 0px);"><li style="float: left; list-style: none; position: relative; width: 313px;" class="bx-clone">
<a href="javascript:contentsViewMain('17','','617ad125af1d417ab4f5e4cea756f1d2','F')" title="">
<p class="tag">전체</p>
<p class="boardTitle">11111111111111111111</p>
<p class="boardTxt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</a>
</li><li style="float: left; list-style: none; position: relative; width: 313px;" class="bx-clone">
<a href="javascript:contentsViewMain('17','','617ad125af1d417ab4f5e4cea756f1d2','F')" title="">
<p class="tag">전체</p>
<p class="boardTitle">11111111111111111111</p>
<p class="boardTxt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</a>
</li><li style="float: left; list-style: none; position: relative; width: 313px;" class="bx-clone">
<a href="javascript:contentsViewMain('17','','ca8ba98fd9e04d43be5ddd61e37a5974','F')" title="">
<p class="tag">11111111111111111111111111111</p>
<p class="boardTitle">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
<p class="boardTxt">
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext </p>
</a>
</li><li style="float: left; list-style: none; position: relative; width: 313px;" class="bx-clone">
<a href="javascript:contentsViewMain('3','','f31b5d716c9240e48357da0e5a695c9c','F')" title="">
<p class="tag">전체</p>
<p class="boardTitle">2222222222222222</p>
<p class="boardTxt">
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
</a>
</li>
<!-- start of list -->
<li style="float: left; list-style: none; position: relative; width: 313px;">
<a href="javascript:contentsViewMain('17','','617ad125af1d417ab4f5e4cea756f1d2','F')" title="">
<p class="tag">전체</p>
<p class="boardTitle">3333333333333333333</p>
<p class="boardTxt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 313px;">
<a href="javascript:contentsViewMain('3','','5b7789ba54eb49f8af5bb24c78ee0015','F')" title="">
<p class="tag">전체</p>
<p class="boardTitle">3333333333333333333333333333</p>
<p class="boardTxt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 313px;">
<a href="javascript:contentsViewMain('3','','5b7789ba54eb49f8af5bb24c78ee0015','F')" title="">
<p class="tag">전체</p>
<p class="boardTitle">3333333333333333333333333333</p>
<p class="boardTxt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 313px;">
<a href="javascript:contentsViewMain('3','','5b7789ba54eb49f8af5bb24c78ee0015','F')" title="">
<p class="tag">전체</p>
<p class="boardTitle">3333333333333333333333333333</p>
<p class="boardTxt">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</a>
</li>
</ul></div><div class="bx-controls bx-has-controls-direction"><div class="bx-controls-direction"><a class="bx-prev" href="javascript:void(0);">Prev</a><a class="bx-next" href="javascript:void(0);">Next</a></div></div></div>
이 구조를 보여드리는 이유는 tab했을때 초점이
brief > ul >li 의 active된 리스트의 첫번째로 초점이 가야하는데 초점이 슬라이더 보이는 부분부터 보여서 수정하려고 합니다.
/* 공지사항 */
$(function(){
$('.brief').find(' li > a').on('click',function(){
$(this).parent('li').addClass('active');
$(this).parent('li').siblings('li').removeClass('active');
$('.brief').find(' li > a').attr('title','');
$(this).attr('title','선택됨');
});
$('.brief-list').bxSlider({
//infiniteLoop: false,
auto:false,
speed:1000,
pause:5000,
maxSlides:4,
moveSlides:1,
slideWidth:313,
slideMargin:0,
responsive:true,
mode:'horizontal',
controls:true,
pager:false
});
});
});
이 js를 활용해서 수정하려고 하는데 잘 안되서 다시 쓰게 되었습니다.
항상 공부해도 실력이 모자라서 댓글 남겨주시는 모든분들 감사합니다.
답변 2
이전에도 답변드렸지만
해당 내용의 방법을 알려드렸음에도 이번 내용은 본인 능력을 상회하는 작업같습니다..
속편하게 의뢰로 가심이 어떠실지...
정말 어렵네요ㅠ 최대한 제가 열심히 다시 풀어보겠습니다! 항상 답변 빠르게 주셔서 감사합니다!
한가지 더 조언드리자면 챗GPT 를 맹신하지 마세요.
챗GPT 는 모른다는 말을 하지 않습니다.
모름에도 불구하고 다른 거짓된 정보를 알려줘서 혼동을 주기도 합니다.
아 넵 챗gpt는 활용하긴 해도 가끔씩은 너무 혼동되고 어려운코드를 짜주더라고요 최대한 간단하게
제가 짤 수 있게 노력해보겠습니다
/* 공지사항 */
$(function(){
// 탭 클릭 이벤트
$('.brief').find('li > a').on('click', function () {
const $this = $(this);
const $parentLi = $this.parent('li');
// 활성화 상태 설정
$parentLi.addClass('active').siblings('li').removeClass('active');
$('.brief').find('li > a').attr('title', '');
$this.attr('title', '선택됨');
// bx-controls-direction 버튼 텍스트 업데이트
updateControlText($this.text());
});
$('.brief-list').bxSlider({
//infiniteLoop: false,
auto:false,
speed:1000,
pause:5000,
maxSlides:4,
moveSlides:1,
slideWidth:313,
slideMargin:0,
responsive:true,
mode:'horizontal',
controls:true,
pager:false,
onSliderLoad: function(){
$(".bx-clone").find("a").prop("tabIndex","-1");
},
onSlideAfter: function(){
$(".mainSlider").children("li").each(function(){
if($(this).attr("aria-hidden") == "false"){
$(this).find("a").attr("tabIndex","0");
}else{
$(this).find("a").attr("tabIndex","-1");
}
});
}
});
});
// 컨트롤 텍스트 업데이트 함수
function updateControlText(tabText) {
const prevText = `${tabText} 이전`;
const nextText = `${tabText} 다음`;
$('.bx-controls-direction .bx-prev').text(prevText);
$('.bx-controls-direction .bx-next').text(nextText);
}
});
오 이렇게 해서 수정했어요 감사해요!!!!!!