스크립트 질문 드릴께요...^^ 정보
스크립트 질문 드릴께요...^^본문
저번에도 질문 올렸다가 많은 도움이 되서 코딩 입문 초보자로서 또한번 질문 드립니다.
지금 제가 도움을 받으려고 하는 부분은.. 게시판은 아니지만
현재 코딩으로서 탭기능 최근 게시물 추출 일부분 구현 했습니다.
게시판까지는 아직 할 줄 몰라서 코딩으로만 올렸어요..
근데.. 탭이 4개가 있는데.. 기본에서 다른 탭을 누르면 다른 li 속성 게시물이 나오게 하려는데
그런 스크립트 어떻게 하죠?
주소는 http://haneeya.com 입니다.
우선 제가 작성한 html과 css 올릴께요 ㅠㅠ;
스크립트를 넣고.. 태그와 css에 어떤것을 추가해야 하는지... -_-;;알려주세요ㅠㅠ
다른 탭을 눌렀을때 나오는 문서는 작성 안했는데.. 작성했다는 가정하에 알려주세요ㅠㅠ
<div id="newsBox">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko-KR" lang="ko">
<head>
<title>나고야 </title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<link rel="stylesheet" href="style2.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="newsBox">
<div class="newsTop">
<div class="newsTitle">
<a href="/"><img src="/img/news_title.gif" alt="지구촌뉴스" /></a>
</div> <!-- class: newsTitle-->
<ul class="newsMenu">
<li class="menu"><a href="/">일반</a></li>
<li class="menu"><a href="/">연예</a></li>
<li class="menu"><a href="/">스포츠</a></li>
<li class="menu"><a href="/">화제</a></li>
</ul> <!-- class: newsMenu -->
</div> <!-- class: newsTop -->
<div class="contents">
<ul class="imgBox">
<a href="/" title="시드니 오페라 하우스 인기"><img src="/img/pic.gif" alt="시드니 오페라 하우스 인기" /></a>
<li><a href="/" title="시드니 오페라 하우스 인기">시드니 오페라 하우스 인기</a>
</ul> <!-- class: imgBox -->
<ul class="textBox">
<li class="list">
<a href="/" title="노대통령 헌소 기각..."선거에 부당영향 안된다"">노대통령 헌소 기각..."선거에 부당영향 안된다"</a></li>
<li class="list">
<a href="/" title="김인주 사장, 5년전 검찰조사 "이 회장 비밀금고 있다"">김인주 사장, 5년전 검찰조사 "이 회장 비밀금고 있다"</a>
</li>
<li class="list">
<a href="/" title=""비과세 거주요건 폐지로 서울 집중 심화될 것"">"비과세 거주요건 폐지로 서울 집중 심화될 것"</a>
</li>
<li class="list">
<a href="/" title="[단독] 공포의 '진급 신고식'...의경부대 집단구타 충격">[단독] 공포의 '진급 신고식'...의경부대 집단구타 충격</a>
</li>
<li class="list">
<a href="/" title="커피프린스 이언과 함께하는 모닝커피 한 잔~">커피프린스 이언과 함께하는 모닝커피 한 잔~</a>
</li>
</ul> <!-- class: textBox -->
<div class="btArea">
<a href="/"><img src="/img/bt_left.gif" alt="" /></a>
<a href="/"><img src="/img/bt_right.gif" alt="" /></a>
</div> <!-- class: btArea -->
</div> <!-- class: contents -->
</div> <!-- id:newsBox -->
</body>
</html>
////////////////////////////////////////////////////////
.png24 { tmp:expression(setPng24(this)); }
body {
margin: 0px;
padding: 0px;
}
img { border: 0px; }
.clear { clear: both; }
.colorRed { color: red; }
a.aCopyright { color: #000; text-decoration: none; }
ul { list-style: none; }
#newsBox { width: 502px; height: 150px; margin: 0 auto; margin-top: 20px; }
#newsBox .newsTop { height: 25px; border-bottom: 2px solid #5e9bd4;}
#newsBox .newsTop .newsTitle { float: left; width: 58px; height: 17px; margin-top: 4px; margin-left: 8px; }
#newsBox .newsTop ul.newsMenu { float: left; margin-left: 180px; }
#newsBox .newsTop ul.newsMenu li.menu { float: left; margin-top: 3px; padding-left: 3px; }
#newsBox .newsTop ul.newsMenu li.menu a {
display: block;
width: 61px;
height: 17px;
padding-top: 5px;
font: 10pt 돋움; color: #505050;
text-align: center;
text-decoration: none;
background: url('/img/news_tab.gif') no-repeat;
}
#newsBox .newsTop ul.newsMenu li.menu a:hover {
display: block;
width: 61px;
height: 17px;
font: 10pt 돋움; color: #fff; font-weight: 900;
background: url('/img/news_over.gif') no-repeat;
}
#newsBox .contents { height: 123px; }
#newsBox .contents ul.imgBox { float: left; margin: 0px; padding: 0px; list-style: none; width: 140px; margin-top: 12px; margin-left: 5px; }
#newsBox .contents ul.imgBox a { text-decoration: none; text-align: center; font: 8.5pt 돋움; color: #6c6c6c; }
#newsBox .contents ul.textBox { float: left; margin: 0px; width: 305px; padding: 0px; list-style: none; margin-top: 8px; margin-left: 20px; }
#newsBox .contents ul.textBox li.list { background: url('/img/news_blet.gif') no-repeat left 10px; padding-left: 5px; padding-top: 2px; }
#newsBox .contents ul.textBox a { text-decoration: none; text-align: center; font: 9pt 돋움; color:#5b5b5b }
#newsBox .contents ul.textBox a:hover { font: 8.5pt 돋움; color: #5b5b5b; font-weight: 900; }
#newsBox .contents .btArea { float: left; margin-top: 110px; }
지금 제가 도움을 받으려고 하는 부분은.. 게시판은 아니지만
현재 코딩으로서 탭기능 최근 게시물 추출 일부분 구현 했습니다.
게시판까지는 아직 할 줄 몰라서 코딩으로만 올렸어요..
근데.. 탭이 4개가 있는데.. 기본에서 다른 탭을 누르면 다른 li 속성 게시물이 나오게 하려는데
그런 스크립트 어떻게 하죠?
주소는 http://haneeya.com 입니다.
우선 제가 작성한 html과 css 올릴께요 ㅠㅠ;
스크립트를 넣고.. 태그와 css에 어떤것을 추가해야 하는지... -_-;;알려주세요ㅠㅠ
다른 탭을 눌렀을때 나오는 문서는 작성 안했는데.. 작성했다는 가정하에 알려주세요ㅠㅠ
<div id="newsBox">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko-KR" lang="ko">
<head>
<title>나고야 </title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<link rel="stylesheet" href="style2.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="newsBox">
<div class="newsTop">
<div class="newsTitle">
<a href="/"><img src="/img/news_title.gif" alt="지구촌뉴스" /></a>
</div> <!-- class: newsTitle-->
<ul class="newsMenu">
<li class="menu"><a href="/">일반</a></li>
<li class="menu"><a href="/">연예</a></li>
<li class="menu"><a href="/">스포츠</a></li>
<li class="menu"><a href="/">화제</a></li>
</ul> <!-- class: newsMenu -->
</div> <!-- class: newsTop -->
<div class="contents">
<ul class="imgBox">
<a href="/" title="시드니 오페라 하우스 인기"><img src="/img/pic.gif" alt="시드니 오페라 하우스 인기" /></a>
<li><a href="/" title="시드니 오페라 하우스 인기">시드니 오페라 하우스 인기</a>
</ul> <!-- class: imgBox -->
<ul class="textBox">
<li class="list">
<a href="/" title="노대통령 헌소 기각..."선거에 부당영향 안된다"">노대통령 헌소 기각..."선거에 부당영향 안된다"</a></li>
<li class="list">
<a href="/" title="김인주 사장, 5년전 검찰조사 "이 회장 비밀금고 있다"">김인주 사장, 5년전 검찰조사 "이 회장 비밀금고 있다"</a>
</li>
<li class="list">
<a href="/" title=""비과세 거주요건 폐지로 서울 집중 심화될 것"">"비과세 거주요건 폐지로 서울 집중 심화될 것"</a>
</li>
<li class="list">
<a href="/" title="[단독] 공포의 '진급 신고식'...의경부대 집단구타 충격">[단독] 공포의 '진급 신고식'...의경부대 집단구타 충격</a>
</li>
<li class="list">
<a href="/" title="커피프린스 이언과 함께하는 모닝커피 한 잔~">커피프린스 이언과 함께하는 모닝커피 한 잔~</a>
</li>
</ul> <!-- class: textBox -->
<div class="btArea">
<a href="/"><img src="/img/bt_left.gif" alt="" /></a>
<a href="/"><img src="/img/bt_right.gif" alt="" /></a>
</div> <!-- class: btArea -->
</div> <!-- class: contents -->
</div> <!-- id:newsBox -->
</body>
</html>
////////////////////////////////////////////////////////
.png24 { tmp:expression(setPng24(this)); }
body {
margin: 0px;
padding: 0px;
}
img { border: 0px; }
.clear { clear: both; }
.colorRed { color: red; }
a.aCopyright { color: #000; text-decoration: none; }
ul { list-style: none; }
#newsBox { width: 502px; height: 150px; margin: 0 auto; margin-top: 20px; }
#newsBox .newsTop { height: 25px; border-bottom: 2px solid #5e9bd4;}
#newsBox .newsTop .newsTitle { float: left; width: 58px; height: 17px; margin-top: 4px; margin-left: 8px; }
#newsBox .newsTop ul.newsMenu { float: left; margin-left: 180px; }
#newsBox .newsTop ul.newsMenu li.menu { float: left; margin-top: 3px; padding-left: 3px; }
#newsBox .newsTop ul.newsMenu li.menu a {
display: block;
width: 61px;
height: 17px;
padding-top: 5px;
font: 10pt 돋움; color: #505050;
text-align: center;
text-decoration: none;
background: url('/img/news_tab.gif') no-repeat;
}
#newsBox .newsTop ul.newsMenu li.menu a:hover {
display: block;
width: 61px;
height: 17px;
font: 10pt 돋움; color: #fff; font-weight: 900;
background: url('/img/news_over.gif') no-repeat;
}
#newsBox .contents { height: 123px; }
#newsBox .contents ul.imgBox { float: left; margin: 0px; padding: 0px; list-style: none; width: 140px; margin-top: 12px; margin-left: 5px; }
#newsBox .contents ul.imgBox a { text-decoration: none; text-align: center; font: 8.5pt 돋움; color: #6c6c6c; }
#newsBox .contents ul.textBox { float: left; margin: 0px; width: 305px; padding: 0px; list-style: none; margin-top: 8px; margin-left: 20px; }
#newsBox .contents ul.textBox li.list { background: url('/img/news_blet.gif') no-repeat left 10px; padding-left: 5px; padding-top: 2px; }
#newsBox .contents ul.textBox a { text-decoration: none; text-align: center; font: 9pt 돋움; color:#5b5b5b }
#newsBox .contents ul.textBox a:hover { font: 8.5pt 돋움; color: #5b5b5b; font-weight: 900; }
#newsBox .contents .btArea { float: left; margin-top: 110px; }
댓글 전체
<li class="menu"><a href="/">일반</a></li>
를 누르면
<li class="list">
<a href="/" title="김인주 사장, 5년전 검찰조사 "이 회장 비밀금고 있다"">김인주 사장, 5년전 검찰조사 "이 회장 비밀금고 있다"</a>
</li>
가 보이게 하는 건가요?
를 누르면
<li class="list">
<a href="/" title="김인주 사장, 5년전 검찰조사 "이 회장 비밀금고 있다"">김인주 사장, 5년전 검찰조사 "이 회장 비밀금고 있다"</a>
</li>
가 보이게 하는 건가요?
지금의 페이지에서 보시는. 라인이 보이는거고 연예를 눌렀을때는 다른 리스트가 보이는 것을 할려고 해요.. 그런데.. 지금 연예에 대한 li는 만들지 않았고.. 다른 탭들도 만들지 않았지만...
있다고 가정하에 여쭙는거죠^^;
한가지 추가 하자면 다른 탭을 눌렀다가 마우스를 떼어도 클릭한 탭이 유지가 되는..? 그런거요 ㅎ
있다고 가정하에 여쭙는거죠^^;
한가지 추가 하자면 다른 탭을 눌렀다가 마우스를 떼어도 클릭한 탭이 유지가 되는..? 그런거요 ㅎ
