본문 바로가기
Developer/HTML & JSP & CSS

[JSP] URL읽어서 CSS컨트롤하기

by 순수한소년 2017. 12. 13.
728x90
반응형

Style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<link type="text/css" href="/resources/js/jquery.ui/css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript" src="/resources/js/jquery.ui/js/jquery-ui-1.9.0.custom.min.js"></script>
<script type="text/javascript" src="<c:url value='/resources/js/jquery.confirm/jquery-confirm.js'/>"></script>
<link type="text/css" rel="stylesheet" href="<c:url value='/resources/js/jquery.confirm/jquery-confirm.css'/>">
<style type="text/css" media="screen">
@charset "utf-8";
#headerAd { width: 100%; height: 30px; position: relative; padding-top: 15px; padding-bottom: 15px; margin-top: 5px; border-bottom: 4px solid #252424; }
#headerAd div.util_section { width: 100%; height: 30px; background: #C24322; }
#headerAd div.util_section div.util_section_in { width: 980px; display: block; margin: 0 auto; padding: 0; }
#headerAd div.util_section div.util_section_in p.util_top { float: left; }
#headerAd div.util_section div.util_section_in ul.util { float: right; position: relative; font-family: Dotum; margin: 7px 7px 0 0; letter-spacing: -1px; }
#headerAd div.util_section div.util_section_in li { float: left; font-size: 13px; }
#headerAd div.util_section div.util_section_in li.bar { color: #fff; margin: 0 10px; }
#headerAd div.util_section div.util_section_in li a { color: #fff; }
#headerAd div.util_section div.util_section_in li a img.util_arrow { margin: 7px 0 0 10px; }
#headerAd div.util_section div.util_section_in li div.siteserList { position: absolute; right: 0; top: 30px; width: 250px; background: #252525; z-index: 999; }
#headerAd div.util_section div.util_section_in li div.siteserList ul.sitelist li { float: left; width: 100%; }
#headerAd div.util_section div.util_section_in li div.siteserList ul.sitelist li a { display: block; background: #252525; border-bottom: 1px solid #000000; padding: 9px 0px 9px 15px; }
#headerAd div.headerAd_in { width: 980px; height: 78px; display: block; margin: 0 auto; }
#headerAd div.headerAd_in div.logo { float: left; width: 305px; height: 78px; }
#headerAd div.headerAd_in div.logo h1 { float: left; width: 240px; height: 78px; }
#headerAd div.headerAd_in div.logo h1 a { display: block; width: 240px; height: 78px; }
#headerAd div.headerAd_in div#openArea { display: show; clear: both; float: right; margin: 0 auto; }
#admArea { display: none; clear: both; margin: 0 auto; }
#admArea div.logo { margin: 0 auto; padding: 10px 0px 10px 145px; }
#admDiv { height: 40px; padding: 20px 0px 10px 0px; color: #252424; font-size: 15px; font-weight: bold; }
a.admSubmenu1 { display: inline-block; padding-top: 10px; border-top: 10px; border-bottom: 10px; }
a.admSubmenu1:hover { display: inline-block; padding-top: 10px; border-bottom: 5px solid #09545d; }
a.admSubmenu2 { display: inline-block; padding: 10px 0px 0px 10px; border-top: 10px; border-bottom: 10px; }
a.admSubmenu2:hover { display: inline-block; padding-top: 10px; border-bottom: 5px solid #09545d; }
a.admSubmenu3 { display: inline-block; padding: 10px 0px 0px 10px; border-top: 10px; border-bottom: 10px; }
a.admSubmenu3:hover { display: inline-block; padding-top: 10px; border-bottom: 5px solid #09545d; }
a.admSubmenu4 { display: inline-block; padding: 10px 0px 0px 10px; border-top: 10px; border-bottom: 10px; }
a.admSubmenu4:hover { display: inline-block; padding-top: 10px; border-bottom: 5px solid #09545d; }
a.admSubmenu5 { display: inline-block; padding: 10px 0px 0px 10px; border-top: 10px; border-bottom: 10px; }
a.admSubmenu5:hover { display: inline-block; padding-top: 10px; border-bottom: 5px solid #09545d; }
a.admSubmenu6 { display: inline-block; padding: 10px 0px 0px 10px; border-top: 10px; border-bottom: 10px; }
a.admSubmenu6:hover { display: inline-block; padding-top: 10px; border-bottom: 5px solid #09545d; }
</style>
 
cs



Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
   //뭐같은솔루션에서빌드가안되서만듬
   function keepMenuIdCheck() {
       var link = document.location.href;
 
       for (i = 1; i <= 6; i++) {
           var find = link.indexOf("/epis/keep/000" + i);
           if (find != "-1") {
               var admSubmenu = "admSubmenu" + i;
               $("." + admSubmenu).css('color''#EC6100');
               if (admSubmenu == "admSubmenu6") {
                   var pageIndex = $("#pageIndex").val();
                   if (pageIndex == "" || pageIndex == "null" || pageIndex == null || pageIndex == "undefined" || pageIndex == undefined) {
                       employKeepDeadlineAjaxList('1');
                   } else {
                       employKeepDeadlineAjaxList(pageIndex);
                   }
               }
           }
       }
   }
</script>
cs



HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<c:set var="ctxRt" value="${pageContext.request.contextPath }" />
<c:set var="site" value="asite" />
 
<body onload="keepMenuIdCheck()">
<div id="wrap">
<div id="admArea" style="width: 980px; height: 78px; display: block; margin: 0 auto;">
    <div id="admDiv">
        <span id="admSpan1">
            <a class="admSubmenu1" href="${ctxRt }/${site }/keep/0001/index.jsp">★관리</a>
        </span>
        <span id="admSpan2">
            <a class="admSubmenu2" href="${ctxRt }/${site }/keep/0002/index.jsp">★관리</a>
        </span>
        <span id="admSpan3">
            <a class="admSubmenu3" href="${ctxRt }/${site }/keep/0003/index.jsp">★상담</a>
        </span>
        <span id="admSpan4">
            <a class="admSubmenu4" href="${ctxRt }/${site }/keep/0004/index.jsp">★상담</a>
        </span>
        <span id="admSpan5">
            <a class="admSubmenu5" href="${ctxRt }/${site }/keep/0005/index.jsp">★보고</a>
        </span>
        <span id="admSpan6">
            <a class="admSubmenu6" href="${ctxRt }/${site }/keep/0006/index.jsp">★마감</a>
        </span>
    </div>
</div>
</div>
</body>
 
cs


반응형