консолидировать javascript - навигация для отображения содержимого

Чтобы кратко описать предполагаемый дизайн: я хочу, чтобы навигационное меню, которое наводило, показывало контент. Но я также ищу гибкость и простоту. Поскольку каждый элемент nav ведет себя одинаково, я полагаю, что javascript и css могут быть записаны один раз с переменными, которые идентифицируют каждый элемент nav. До сих пор я использовал несколько разных подходов, но для меня лучше всего работало. Следует признать, что это болезненно избыточное:консолидировать javascript - навигация для отображения содержимого

<div id="leftColumn"> 
<div id="nav1" 
onmouseover=" 
document.getElementById('nav1').style.backgroundColor = 'black'; 
document.getElementById('nav1').style.color = 'white'; 
document.getElementById('content1').style.display = 'block';" 
onmouseout=" 
document.getElementById('content1').style.display = 'none'; 
document.getElementById('nav1').style.color = 'black'; 
document.getElementById('nav1').style.backgroundColor = 'white';"> 
DECONSTRUCTIONS 
</div> 
<div id="nav2" 
onmouseover=" 
document.getElementById('nav2').style.backgroundColor = 'black'; 
document.getElementById('nav2').style.color = 'white'; 
document.getElementById('content2').style.display = 'block';" 
onmouseout=" 
document.getElementById('content2').style.display = 'none'; 
document.getElementById('nav2').style.color = 'black'; 
document.getElementById('nav2').style.backgroundColor = 'white';"> 
CONSTRUCTIONS 
</div> 
<div id="nav3" 
onmouseover=" 
document.getElementById('nav3').style.backgroundColor = 'black'; 
document.getElementById('nav3').style.color = 'white'; 
document.getElementById('content3').style.display = 'block';" 
onmouseout=" 
document.getElementById('content3').style.display = 'none'; 
document.getElementById('nav3').style.color = 'black'; 
document.getElementById('nav3').style.backgroundColor = 'white';"> 
OBSERVATIONS 
</div> 
</div> 
<div id="rightColumn"> 
<div id="content1">deconstructions are...</div> 
<div id="content2">constructions are...</div> 
<div id="content3">observations are...</div> 
</div>

И релевантные (также избыточный) CSS:

#nav1 {padding-left:25px; width:200px; line-height:150%; background-color:white;} 
#nav2 {padding-left:25px; width:200px; line-height:150%; background-color:white;} 
#nav3 {padding-left:25px; width:200px; line-height:150%; background-color:white;} 
#content1 {display:none;} 
#content2 {display:none;} 
#content3 {display:none;}

Повторится, я хочу, чтобы все было как можно более простыми, но гибкий для последующего редактирования - для добавление будущих элементов навигации и соответствующего содержимого. Я искал решения и пробовал другие подходы, но каждый раз javascript/jQuery быстро становится сложным и превосходит мои способности понимать и модифицировать по своему вкусу. Любые советы, советы, решения, объяснения, ресурсы ... будут высоко оценены. Благодаря!

источник

2014-02-01 jkahna

Вы можете создать две функции separte для события mouseover и mouseout и можете добавить меню навигации в html столько, сколько хотите.

Полное описание доступно на следующих языках: английский.

<html> 
<style type="text/css"> 
/*we can combine the selectors with comman if same css values available for all*/ 
#nav1, #nav2, #nav3{padding-left:25px; width:200px; line-height:150%; background-color:white;} 
#content1, #content2, #content3 {display:none;} 
</style> 
<script> 

    function displayContent(div, contentId){ 
      /*div is reffering the current mouseovered div*/ 
     div.style.backgroundColor = 'black'; 
     div.style.color = 'white'; 
     document.getElementById(contentId).style.display = 'block'; 
    } 

    function hideContent(div, contentId){ 
     document.getElementById(contentId).style.display = 'none'; 
     div.style.color = 'black'; 
     div.style.backgroundColor = 'white'; 
    } 
</script> 
<body> 
    <div id="leftColumn"> 
    <div id="nav1" onmouseover="displayContent(this, 'content1')" onmouseout="hideContent(this, 'content1')"> 
    DECONSTRUCTIONS 
    </div> 

    <div id="nav2" onmouseover="displayContent(this, 'content2')" onmouseout="hideContent(this, 'content2')"> 
    CONSTRUCTIONS 
    </div> 
    </body> 
    <div id="nav3" onmouseover="displayContent(this, 'content3')" onmouseout="hideContent(this, 'content3')"> 
    OBSERVATIONS 
    </div> 
    </div> 
    <div id="rightColumn"> 
    <div id="content1">deconstructions are...</div> 
    <div id="content2">constructions are...</div> 
    <div id="content3">observations are...</div> 
    </div> 
</html>

источник

2014-02-01 03:56:47

отлично, спасибо. и спасибо за объяснение, очень полезно. – jkahna

Вместо Джава скрипт для изменения color.CSS имеет свойство :hover изменить при наведении курсора происходит на некотором элементе и OnMouseOver и onmouseout передать функции с аргументами так, чтобы отображать и скрывать contents.I присоединила полный код для справки.

<!DOCTYPE html> 
<html> 

    <head> 
     <style> 
      #nav1 { 
       padding-left:25px; 
       width:200px; 
       line-height:150%; 
       background-color:white; 
      } 
      #nav2 { 
       padding-left:25px; 
       width:200px; 
       line-height:150%; 
       background-color:white; 
      } 
      #nav3 { 
       padding-left:25px; 
       width:200px; 
       line-height:150%; 
       background-color:white; 
      } 
      #content1 { 
       display:none; 
      } 
      #content2 { 
       display:none; 
      } 
      #content3 { 
       display:none; 
      }

CSS для висения, чтобы изменить цвет

  #nav1:hover, #nav2:hover, #nav3:hover { 
       background:black; 
       color:white; 
      } 
     </style>

JavaScript

 <script> 
      function display(contentID) { 
       document.getElementById(contentID).style.display = 'block'; 
      } 

      function hide(contentID) { 
       document.getElementById(contentID).style.display = 'none'; 
      } 
     </script> 
    </head> 

    <body> 
     <div id="leftColumn"> 
      <div id="nav1" onmouseover="display('content1')" onmouseout=" 
hide('content1'); 
">DECONSTRUCTIONS</div> 
      <div id="nav2" onmouseover="display('content2')" onmouseout=" 
hide('content2'); 
">CONSTRUCTIONS</div> 
      <div id="nav3" onmouseover="display('content3')" onmouseout=" 
hide('content3'); 
">OBSERVATIONS</div> 
     </div> 
     <div id="rightColumn"> 
      <div id="content1">deconstructions are...</div> 
      <div id="content2">constructions are...</div> 
      <div id="content3">observations are...</div> 
     </div> 
    </body> 

</html>

источник

2014-02-01 04:22:07

спасибо SK. даже проще! – jkahna

консолидировать javascript - навигация для отображения содержимого

ответ

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