메뉴 클릭시 텍스트 변경

거의 동일하고로드가 필요한 페이지를 12 개 만들고 싶지 않기 때문에 어떤 메뉴를 클릭했는지에 따라 텍스트를 변경하는 메뉴 시스템을 만들려고합니다. 로드 중. 저는 온라인에서 보았지만 올바른 키워드를 사용하지 않았기 때문에 아마 아무 것도 찾지 못했지만이 방법을 수행하는 최선의 방법이 무엇인지 궁금해하고 있었습니까? 난 당신이 텍스트를 숨길 CSS에서 가시성 태그를 사용할 수 있습니다 것으로 나타났습니다하지만이 빈 줄을 많이 떠나 내가 많은 텍스트를 표시하고있어 이후 끔찍한 보일 것메뉴 클릭시 텍스트 변경

HTML :

<html> 
    <head> 
    <script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script> 
    <script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="js/menu.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="css/menu.css"> 

    </head> 
    <body> 

    <div id="accordian"> 
     <ul> 
      <li class="active"> 
       <h3><span class="icon-dashboard"></span>Menu 1</h3> 
       <ul> 
        <li><a href="#">Submenu 1</a></li> 
        <li><a href="#">Submenu 2</a></li> 
        <li><a href="#">Submenu 3</a></li> 
       </ul> 
      </li> 
      <li> 
       <h3><span class="icon-tasks"></span>Menu 2</h3> 
       <ul> 
        <li><a href="#">Submenu 4</a></li> 
        <li><a href="#">Submenu 5</a></li> 
        <li><a href="#">Submenu 6</a></li> 
       </ul> 
      </li> 
      <li> 
       <h3><span class="icon-calendar"></span>Menu 3</h3> 
       <ul> 
        <li><a href="#">Submenu 7</a></li> 
        <li><a href="#">Submenu 8</a></li> 
        <li><a href="#">Submenu 9</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    </body> 
</html>

CSS :

@import url(http://fonts.googleapis.com/css?family=Nunito); 
* {margin: 0; padding: 0;} 

body { 
    background: #4EB889; 
    font-family: Nunito, arial, verdana; 
} 
#accordian { 
    background: #004050; 
    width: 250px; 
    margin: 100px auto 0 auto; 
    color: white; 
    box-shadow: 
     0 5px 15px 1px rgba(0, 0, 0, 0.6), 
     0 0 200px 1px rgba(255, 255, 255, 0.5); 
} 
#accordian h3 { 
    font-size: 12px; 
    line-height: 34px; 
    padding: 0 10px; 
    cursor: pointer; 
    background: #003040; 
    background: linear-gradient(#003040, #002535); 
} 
#accordian h3:hover { 
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); 
} 
#accordian h3 span { 
    font-size: 16px; 
    margin-right: 10px; 
} 
#accordian li { 
    list-style-type: none; 
} 
#accordian ul ul li a { 
    color: white; 
    text-decoration: none; 
    font-size: 11px; 
    line-height: 27px; 
    display: block; 
    padding: 0 15px; 
    transition: all 0.15s; 
} 
#accordian ul ul li a:hover { 
    background: #003545; 
    border-left: 5px solid lightgreen; 
} 
#accordian ul ul { 
    display: none; 
} 
#accordian li.active ul { 
    display: block; 
}

JQuery와 :

$(document).ready(function(){ 
    $("#accordian h3").click(function(){ 
    if(!$(this).next().is(":visible")) { 
     $(this).next().slideDown(); 
     } else { 
      $(this).next().slideUp(); 
     } 
    }) 
})

출처

2016-08-10 Naiek

사이드 노트 : CSS를 사용하여 페이지에 요소를 표시하지 않으려면'visibility : hidden' 대신'display : none'을 사용할 수 있습니다. 가시성은 요소가 차지하는 공간을 계속 사용하지만 내용은 표시하지 않지만 표시는 공간을 사용하거나 내용을 표시하지 않습니다. – TW80000

CSS가 아닌 Javascript JSON 솔루션이 필요한 것 같습니다. –

질문이 명확하지 않습니다. – brk

당신은 CSS를 변경할 필요가 없습니다 숨기기()와 소를 사용하려고 도움을()

here is example

출처

2016-08-10 14:46:57

모두에게 감사 w opentab 함수를 사용하여 메뉴 링크와 표시 전환을 사용하여 작동 시켰습니다. 누군가 그것을 제안했지만 답변을 삭제 한 것 같습니다.

출처

2016-08-11 09:40:39 Naiek

메뉴 클릭시 텍스트 변경

답변

관련 문제