푼

메뉴 현재페이지 고정때문에 질문드려요

· 2015-08-11 (화) 13:51:14 · 2905 · 2

 

웹페이지 제작중인데 왼쪽 메뉴가 서브메뉴클릭해서 페이지가 넘어갈때 다음 페이지에서 누른 메뉴가 고정되어있게하고 싶은데..쿠키값이나 세션으로해야되나요...ㅠㅠ 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
    src="${pageContext.request.contextPath}/admin/temp/assets/js/jquery-1.10.2.js"></script>

<script type="text/javascript">
 $(document).ready(function(){

$('.nav').click(function() {
   
    console.log(this)

    if ($(this).parent())
        {
            console.log(this)
        }
});
 });


</script>
</head>
<body>
    <!-- /. TOP NAVI 시작부분  -->
    <!-- <nav class="navbar navbar-default navbar-cls-top " role="navigation"
        style="margin-bottom: 0"> -->
    <div class="btn_MA_tg navbar-header">
        <button type="button" class="btn_MA_tg navbar-toggle"
            data-toggle="collapse" data-target=".sidebar-collapse">
            <span class="sr-only">Toggle navigation<img
                src="${pageContext.request.contextPath}/imgs/inovtech.png"
                class="user-image img-responsive" alt="enterprize" /></span> <span
                class="icon-bar"></span> <span class="icon-bar"></span> <span
                class="icon-bar"></span>
        </button>
        <!--             <a class="navbar-brand" href="index.jsp"></a> -->
    </div>
    <!-- </nav>  -->

    <!-- /. side NAVI 시작부분  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse main_menu_bg">

            <ul class="nav" id="main-menu">
                <li style="border: 0; text-align: center;" class="main_menu_util_ar"><span><a
                        href="main">HOME</a></span> l <span><a href="#">SITEMAP</a></span> l <span><a
                        href="in_04_contact">CONTACT US</a></span></li>

                <li style="border: 0; text-align: center;" class="main_menu_logo_ar">
                    <a href="${pageContext.request.contextPath}/main"><img
                        src="${pageContext.request.contextPath}/imgs/main_gnb_logo.gif"
                        alt="LOGO" /></a>
                </li>




                <!-- ------------------ 회사소개 개요  ------------------------  -->
                <li style="border: 0" class="main_menu_m_text active">
                <a    href="${pageContext.request.contextPath}/in_01_ceo">
                    <i class="menu1"></i> 회사소개
                </a>
                    <ul class="nav" id="tab">
                        <li class="main_menu_s_text"><a href="in_01_ceo"
                            style="background-color: #fff">CEO인사말</a></li>
                        <li class="main_menu_s_text"><a href="in_02_philo"
                            style="background-color: #fff">기업이념</a></li>
                        <li class="main_menu_s_text"><a href="in_03_corp"
                            style="background-color: #fff">법인현황</a></li>
                        <li class="main_menu_s_text"><a href="in_04_contact"
                            style="background-color: #fff">오시는길</a></li>
                    </ul></li>


                <!-- ------------------ 솔루션 개요  ------------------------  -->
                <li style="border: 0" class="main_menu_m_text"><a
                    href="${pageContext.request.contextPath}/so_01_health_01"> <i
                        class="menu2"></i>솔루션
                </a>
                    <ul class="nav">
                        <li class="main_menu_s_text"><a href="so_01_health_01"
                            style="background-color: #fff"><i class=""></i>건강검진 솔루션</a></li>
                        <li class="main_menu_s_text"><a href="so_02_time"
                            style="background-color: #fff"><i class=""></i>Time Manager</a></li>
                        <li class="main_menu_s_text"><a href="so_03_ac"
                            style="background-color: #fff"><i class=""></i>AC Manager</a></li>
                        <li class="main_menu_s_text"><a href="so_04_erp"
                            style="background-color: #fff"><i class=""></i>INO-ERP</a></li>
                        <li class="main_menu_s_text"><a href="so_05_dfs"
                            style="background-color: #fff"><i class=""></i>INO-DFS</a></li>
                        <li class="main_menu_s_text"><a href="so_06_spac_00"
                            style="background-color: #fff"><i class=""></i>SMARTPAC-ERP</a></li>
                        <li class="main_menu_s_text"><a href="so_07_mpms"
                            style="background-color: #fff"><i class=""></i>mPMS</a></li>
                        <li class="main_menu_s_text"><a href="so_08_farm"
                            style="background-color: #fff"><i class=""></i>Farm-plus</a></li>
                        <li class="main_menu_s_text"><a href="so_09_cms"
                            style="background-color: #fff"><i class=""></i>CMS</a></li>
                        <li class="main_menu_s_text"><a href="so_10_tms_01"
                            style="background-color: #fff"><i class=""></i>TMS</a></li>
                        <li class="main_menu_s_text"><a href="so_11_think"
                            style="background-color: #fff"><i class=""></i>Think wise</a></li>
                        <li class="main_menu_s_text"><a href="so_12_com"
                            style="background-color: #fff"><i class=""></i>똑똑컴</a></li>

                    </ul></li>

|

댓글 2개

라인맵이 있다면 ~.
라인맵의 현재위치와 네비게이션의 text를 매칭시켜.
네비게이션 해당 메뉴에 class를 주어(ex addClass('active');서
CSS로 변경합니다.

[code]
<ul class="nav" id="main-menu">
<li><a href="#">CEO인사말</a></li>
<li><a href="#">기업이념</a></li>
<li><a href="#">법인현황</a></li>
</ul>

<div id="linemap">
<a href="">홈</a> >
<a href="">회사소개</a> >
<strong>기업이념</strong>
</div>

<script>
var currentNavCheck = {
app : function(){
var nav = $('#main-menu');
var curText = $('#linemap strong').text();
nav.find('a:contains('+curText+')').addClass('active');
},
init : function(){
this.app();
}
};

(function(){
currentNavCheck.init();
})();
</script>
[/code]

http://njean.com/ex/curNavCheck.html

단 라인맵의 텍스트와 메뉴의 텍스트가 같아야 해요.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
16-07-13 조회 2,109
16-07-12 조회 2,250
16-07-12 조회 2,270
16-07-11 조회 2,145
16-06-05 조회 2,773
16-06-03 조회 2,840
16-05-26 조회 2,770
15-09-22 조회 4,884
15-06-10 조회 4,740
14-10-25 조회 6,256
14-10-22 조회 8,881
14-09-21 조회 5,684
14-09-16 조회 4,969
14-08-22 조회 1만
14-08-13 조회 5,795
14-08-12 조회 5,342
14-08-12 조회 6,206
14-08-11 조회 6,806
14-06-12 조회 6,093
14-06-11 조회 5,004
14-05-09 조회 5,322
14-05-09 조회 6,278
14-05-09 조회 6,307
14-05-08 조회 5,644
14-04-17 조회 4,646
14-04-16 조회 4,493
14-04-15 조회 4,498
14-04-15 조회 4,445
14-04-15 조회 4,214
14-04-14 조회 4,205
14-04-14 조회 4,171
14-04-14 조회 4,559
14-04-14 조회 4,708
14-04-14 조회 4,696
14-04-13 조회 4,577
14-04-12 조회 4,128
14-04-12 조회 4,291
14-04-12 조회 4,401
14-04-11 조회 4,925
14-04-10 조회 4,664
14-04-10 조회 4,678
14-04-09 조회 4,843
14-04-09 조회 5,209
14-04-08 조회 6,875
13-10-30 조회 7,608
13-07-11 조회 5,038
13-03-28 조회 1.1만
13-02-27 조회 6,672
13-02-14 조회 5,482
13-01-10 조회 4,441
12-12-31 조회 4,991
12-12-20 조회 6,051
12-12-12 조회 5,207
12-12-07 조회 4,407
12-11-28 조회 4,723
12-11-22 조회 5,176
12-11-12 조회 5,539
12-09-22 조회 4,453
12-09-18 조회 4,640