제이쿼리 질문 있습니다 ^^;;;
UriGellA
10년 전
조회 2,545
menu bar 제이쿼리를 적용 하였습니다.
근대 클릭을 하면, 해당 경로로 이동을 하지 않네요, 이동을 하게끔 주석처리를 하면, 메뉴 본연의 기능이 안나옵니다.
메뉴 기능)
클릭시 마지막 클릭한 지점에 selected 라는 style 이 적용 되는 겁니다.
제이퀘리 소스)
</p><p><script>
</html>
<span style="color: rgb(255, 0, 0);"> $('ul.form li a').click(</span>
<span style="color: rgb(255, 0, 0);"> function(e) {</span>
<span style="color: rgb(255, 0, 0);"> e.preventDefault(); // prevent the default action</span>
<span style="color: rgb(255, 0, 0);"> e.stopPropagation; // stop the click from bubbling</span>
<span style="color: rgb(255, 0, 0);"> $(this).closest('ul').find('.selected').removeClass('selected');</span>
<span style="color: rgb(255, 0, 0);"> $(this).parent().addClass('selected');</span>
<span style="color: rgb(255, 0, 0);"> </span>
<span style="color: rgb(255, 0, 0);"> });</span>
<span style="color: rgb(255, 0, 0);"> });</span>
</script>
<script language='javascript' src="<?=$g4['path']?>/js/url.js" type="text/javascript"></script>
<style>
body {
background: scroll center center;
margin:0;
padding:0;
font-family:Nanum Gothic;</p><p> }</p><p> ul.form {
position:relative;
background:#fff;
width:220px;
margin:auto;
padding:0;
list-style: none;
overflow:hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}</p><p> .form li a {
width:225px;
padding-left:20px;
height:30px;
line-height:30px;
display:block;
overflow:hidden;
position:relative;
text-decoration:none;
text-transform:uppercase;
font-size:12px;
color:#686868;
border-bottom:dotted 1pt #c0c0c0;</p><p> -webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}</p><p> .form li a:hover {
background:#3498db;
color:white;
font-weight: bold;
}</p><p> .form li a.profile {
border-left:5px solid #008747;
}</p><p> .form li a.messages {
border-left:5px solid #fecf54;
}
.form li a.settings {
border-left:5px solid #cf2130;
}</p><p> .form li a.logout {
border-left:5px solid #dde2d5;
} </p><p>.form li a.pub {
border-left:5px solid #98c7e7;
font-weight: bold;
}
.form li a.pub2 {
border-left:5px solid #3498db;
background:#3498db;
color:white;
font-size:18px;
font-weight: bold;</p><p>
}
.form li:first-child a:hover, .form li:first-child a {
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}</p><p> .form li:last-child a:hover, .form li:last-child a {
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}</p><p> .form li a:hover i {
color:#ea4f35;
}</p><p> .form i {
margin-right:15px;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}</p><p> .form em {
font-size: 10px;
background: #ea4f35;
padding: 3px 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-style: normal;
color: #fff;
margin-top: 17px;
margin-right: 15px;
line-height: 10px;
height: 10px;
float:right;
}</p><p> .form li.selected a {
background:#98c7e7;
}</p><p> h1 {
color:black;
margin:0 auto;
margin-top:10px;
margin-bottom:40px;
font-size:30px;
width:220px;
text-align:center;
}
</style>
</head></p><p><body></p><p> <ul class="form">
<li><a class="pub2"><i class="icon-home" style="color:white;font-size:20px;"></i>회사소개</a></li></style>
<li class="selected"><a class="pub" href="javascript:menu1sub1();">CEO 인사말</a></li>
<li><a class="pub" href="javascript:menu1sub2();">회사 연혁</a></li>
</ul> </p><p></body>
</html></p><p>자바는 삽입하였습니다.
function menu1sub1() { location.href = "/renewal/page/greeting.php"; } // CEO인사말
function menu1sub2() { location.href = "/renewal/page/history.php"; } // 회사연혁
최상단 제이쿼리 부분 손보면 될 것 같은대..
혹시 방법좀 부탁 드립니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
10년 전
메뉴 셀렉티드 구현인가요?..
아작스처리가 아닌이상 자바스크립트도 새로고침하면 내가 머했었나? 하는 초기상태로 돌아갑니다.
페이지 이동이있기때문에 제이쿼리로는 안되고 .. php로 구현해야돼요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
그러나 본연의 기능이 안나와요 ㅠㅠ