제이쿼리 질문 있습니다 ^^;;;
본문
menu bar 제이쿼리를 적용 하였습니다.
근대 클릭을 하면, 해당 경로로 이동을 하지 않네요, 이동을 하게끔 주석처리를 하면, 메뉴 본연의 기능이 안나옵니다.
메뉴 기능)
클릭시 마지막 클릭한 지점에 selected 라는 style 이 적용 되는 겁니다.
제이퀘리 소스)
<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
e.preventDefault(); // prevent the default action
e.stopPropagation; // stop the click from bubbling
이 두줄을 없애보세요.
그럼 페이지 이동은 가능합니다;;
그러나 본연의 기능이 안나와요 ㅠㅠ
메뉴 셀렉티드 구현인가요?..
아작스처리가 아닌이상 자바스크립트도 새로고침하면 내가 머했었나? 하는 초기상태로 돌아갑니다.
페이지 이동이있기때문에 제이쿼리로는 안되고 .. php로 구현해야돼요
답변을 작성하시기 전에 로그인 해주세요.