제이쿼리 질문 있습니다 ^^;;;
menu bar 제이쿼리를 적용 하였습니다.
근대 클릭을 하면, 해당 경로로 이동을 하지 않네요, 이동을 하게끔 주석처리를 하면, 메뉴 본연의 기능이 안나옵니다.
메뉴 기능)
클릭시 마지막 클릭한 지점에 selected 라는 style 이 적용 되는 겁니다.
제이퀘리 소스)
Copy
<script></html> $('ul.form li a').click( function(e) { e.preventDefault(); // prevent the default action e.stopPropagation; // stop the click from bubbling $(this).closest('ul').find('.selected').removeClass('selected'); $(this).parent().addClass('selected'); }); }); </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; } 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); } .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; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .form li a:hover { background:#3498db; color:white; font-weight: bold; } .form li a.profile { border-left:5px solid #008747; } .form li a.messages { border-left:5px solid #fecf54; } .form li a.settings { border-left:5px solid #cf2130; } .form li a.logout { border-left:5px solid #dde2d5; } .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; } .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; } .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; } .form li a:hover i { color:#ea4f35; } .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; } .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; } .form li.selected a { background:#98c7e7; } h1 { color:black; margin:0 auto; margin-top:10px; margin-bottom:40px; font-size:30px; width:220px; text-align:center; } </style> </head><body> <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> </body></html>자바는 삽입하였습니다.
function menu1sub1() { location.href = "/renewal/page/greeting.php"; } // CEO인사말
function menu1sub2() { location.href = "/renewal/page/history.php"; } // 회사연혁
최상단 제이쿼리 부분 손보면 될 것 같은대..
혹시 방법좀 부탁 드립니다.
|
답변 2개 / 댓글 1개
2015-04-27 (월) 13:33:13
메뉴 셀렉티드 구현인가요?..
아작스처리가 아닌이상 자바스크립트도 새로고침하면 내가 머했었나? 하는 초기상태로 돌아갑니다.
페이지 이동이있기때문에 제이쿼리로는 안되고 .. php로 구현해야돼요
Sagejin
2015-04-27 (월) 10:37:25
Copy
e.preventDefault(); // prevent the default actione.stopPropagation; // stop the click from bubbling이 두줄을 없애보세요.
답변에 대한 댓글 1개
UriGellA
2015-04-27 (월) 10:49:48
답변을 작성하려면 로그인이 필요합니다.
그러나 본연의 기능이 안나와요 ㅠㅠ