Как изменить навигацию в меню вкладки

Я хочу изменить свою навигационную панель, как в закладках menu.Example нижеКак изменить навигацию в меню вкладки

Пример http://jsfiddle.net/Sherbrow/h6rQ2/3/

Но я хочу чистый JavaScript ..

Мой код здесь:

#navbar{ 
 
     width: 660px; 
 
    } 
 
    #navbar #holder{ 
 
     height: 64px; 
 
     border-bottom: 1px solid #000000; 
 
     width: 630px; 
 
     padding-left: 0px; 
 
    } 
 
    #navbar #holder ul{ 
 
     list-style: none; 
 
     margin: 0; 
 
     padding: 0; 
 

 

 
    } 
 
    #navbar #holder ul li a{ 
 
     text-decoration: none; 
 
     float: left; 
 
     margin-right: 5px ; 
 
     font-family: "Arial Black",Gadget,sans-serif; 
 
     color: #000000; 
 
     border: 1px solid #000000; 
 
     border-bottom: none; 
 
     padding: 23px; 
 
     /*width: 86px;*/ 
 
     text-align: center; 
 
     display: block; 
 
     background: #69F; 
 
     -moz-border-radius-topleft:35% ; 
 
     -moz-border-radius-topright:15px ; 
 

 
    } 
 
    #navbar #holder ul li a:hover{ 
 
     background: #F90; 
 
     color: #FFF; 
 
     text-shadow:1px 1px 1px #000 ; 
 
    } 
 
    #holder ul li a #onlink{ 
 
     background: #ffffff; 
 
     color: #000000; 
 
     border-bottom: 1px solid #ffffff; 
 

 
    } 
 
    #holder ul li a #onlink:hover{ 
 
     background: #ffffff; 
 
     color: #69f; 
 
     text-shadow: 1px 1px 1px #000; 
 
    }

<html> 
 
    <head lang="en"> 
 
     <meta charset="UTF-8"> 
 
     <title></title> 
 
    </head> 
 
    <body> 
 
     <div id ="navbar"> 
 
      <div id="holder"> 
 
       <ul> 
 
        <li><a href ="#" id="onlink">Find a ride</a></li> 
 
        <li><a href ="#" id="onlink">Offer to ride</a> </li> 
 
       </ul> 
 
       <div id="tabs-1"> 
 
        <p>hai</p> 
 
       </div> 
 
       <div id="tabs-2"> 
 
        <p>hello</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

мне нужен код JavaScript только ..

Пожалуйста, любой помощи ... Спасибо за заранее

источник

2015-05-13 appu

Вы пробовали использовать [AngularJS] (https://angularjs.org /)? В учебнике по [CodeSchool] (http://campus.codeschool.com/courses/shaping-up-with-angular-js/) вы можете узнать, как скрыть/показать конкретную вкладку в angularJS (используя JS, конечно) – tektiv

Все, что вам нужно сделать вкладку, чтобы показать и скрыть элементы в соответствии с требованиями

HTML:

<html> 
    <head lang="en"> 
     <meta charset="UTF-8"> 
     <title></title> 
     <style> 
      .nav{ 
       height: 40px ; 
       width: 500px; 
       background: #A9A9A9; 
      } 
      .nav ul{ 
       margin: 0%; 
       padding: 0%; 
      } 
      .nav ul li{ 
       list-style: none; 
      } 
      .nav ul li a{ 
       text-decoration: none; 
       float: left; 
       display: block; 
       padding: 10px 20px ; 
       color: #000000; 
      } 
     </style> 
    </head> 

    <body> 
     <div class ="nav"> 
      <ul> 
       <li><a href="#" onclick='hideandshow({"hideid":"2cont","showid":"1cont"})'>Find a ride</a> 
       </li> 
       <li ><a href="#" onclick='hideandshow({"hideid":"1cont","showid":"2cont"})' > 
       Offer to ride</a></li> 
      </ul> 
     </div> 
     <div class ="nav"> 
      <ul> 
       <li id="1cont"><a href="#" >Find a ride Content </a></li> 
       <li id="2cont" style="display:none"><a href="#">Offer to ride Content</a> </li> 
      </ul> 
     </div> 
    </body> 
</html>

Js:

function hideandshow(obj){ 
    document.getElementById(obj.showid).style.display="block"; 
    document.getElementById(obj.hideid).style.display="none"; 
}

Я добавил код штыря для этого http://codepen.io/anon/pen/vOGKvW

изменить HTML-код и стили в соответствии с вашими требованиями

источник

2015-05-13 07:50:22

Если я нажимаю вкладку, что цвет фона вкладки ... Как сделать – appu

, вы можете изменить цвет фона, так же как отображение в js, как document.getElementById («li id»). Style.backgroundcolor = "red"; document.getElementById ("li id"). Style.backgroundcolor = "green"; –

Вы говорите, что вы хотите, чтобы достичь этого с чистым Javascript, но я хочу показать вам кое-что еще лучше: нет JavaScript на всех.

Такое же поведение можно получить с помощью CSS псевдо-элемент :target (или ::target):
Mozilla Developer Network - :target

Это работает в большинстве браузеров (даже в Internet Explorer 9 или более поздней версии).
Вот пример JS Fiddle о том, как вы можете использовать его для эффекта "лапок":
JSFiddle : Tabs using :target pseudo-element

#tabs 
 
{ 
 
    position: relative; 
 
} 
 

 
.tab 
 
{ 
 
    background-color: white; 
 
    position: absolute; 
 
    width: 100%; 
 
    min-height:50px; 
 
    border: 1px solid grey; 
 
} 
 

 
.tab:target 
 
{ 
 
    z-index: 2; 
 
}

<ul> 
 
    <li><a href="#tab1">Tab 1 </a></li> 
 
    <li><a href="#tab2">Tab 2 </a></li> 
 
    <li><a href="#tab3">Tab 3 </a></li> 
 
    <li><a href="#tab4">Tab 4 </a></li> 
 
</ul> 
 
<div id="tabs"> 
 
    <div class="tab" id="tab1"> 
 
     hi this is tab 1 
 
    </div> 
 
    
 
    <div class="tab" id="tab2"> 
 
     hi this is tab 2 
 
    </div> 
 
    
 
    <div class="tab" id="tab3"> 
 
     hi this is tab 3 
 
    </div> 
 
    
 
    <div class="tab" id="tab4"> 
 
     hi this is tab 4 
 
    </div> 
 
</div>

источник

2015-05-13 10:07:36 B0Andrew

Как изменить навигацию в меню вкладки

ответ

Смежные вопросы