Изменить фоновое изображение по клику - PullRequest
Новая
       2

Изменить фоновое изображение по клику

2 голосов
/ 26 мая 2011

Я хочу изменить фоновое изображение моего горизонтального меню, когда пользователь нажимает на ссылку. У меня просто небольшая проблема, мой код выглядит следующим образом: 

<div class="grid_16" id="menu">
  <ul id='menuTab' class='sqglDropMenu'>
      <li><a href='Home' onclick='changeIt();'>Home</a></li>
      <li><a href='profile' onclick='changeIt();'>Profile</a></li>
      <li><a href='products' onclick='changeIt();'>Products</a></li>
      <li><a href='samples' onclick='changeIt();'>Samples</a></li>
      <li><a href='contact' onclick='changeIt();'>Contact</a></li>
  </ul>
</div>

Мой JS выглядит так: 

function changeIt(){    
  document.getElementById('menuTab').style.backgroundImage = "url(../images/tab_off.png)";
    }

Мой CSS, где установлено исходное фоновое изображение: 

.sqglDropMenu li {float: left; list-style: none; text-align:left; margin-left:5px; position: relative; display: block; line-height: 30px;}
.sqglDropMenu li a {display: block; white-space: nowrap; float: left; text-align:center; font-size: 1.3em; color: #fff;  font-weight:bold; padding-top:5px; margin-top:-1px; background:url(../images/menu_tab.png) no-repeat; width:182px; height:58px;}
.sqglDropMenu li ul {float:left; position: absolute; visibility: hidden; z-index:1000; margin: 0; margin-top:50px; * margin-top: 0px; clear:both; margin-left:-475px; background:url(../images/menuback.png) no-repeat; width:944px; height:60px}
.sqglDropMenu li ul li{float: left; position: relative; clear: left; border-width:0px; display: inline; margin: 0;}
.sqglDropMenu li ul li a{margin-left:20px; border-width:0px; text-align:left; font: 9pt Arial; adding:5px 12px; z-index:100; width: 100px; background:none;}
.sqglDropMenu li ul li a:hover{border-width:0px; background:none;}

Любая помощь приветствуется .... С уважением, Стивен

Ответы [ 4 ]

2 голосов
/ 26 мая 2011

когда вы нажимаете на ссылку, вы перенаправляетесь на выбранную страницу, так что ваша функция будет бесполезна, вы можете делать то, что вы хотите, либо используя

  1. php, получив текущую страницу и установив класс якоря, который устанавливает нужный фон, или
  2. javascript, использующий его так же, как php: D, вы можете сделать это, выполнив что-то вроде этого:

var path = window.location.pathname; var page = path.substring (path.lastIndexOf ('/') + 1); if (page == 'currentpage.html') { document.write ( '') CurrentPage } еще { document.write ( '') CurrentPage }

Надеюсь, это поможет вам

1 голос
/ 26 декабря 2014

Попробуйте этот код 

<script type="text/javascript">
$('a').on('click',function(e){
    var var1 = this.href.split('='+img+')');
    e.preventDefault();
    switch(var1[1]){
    case 'Home':
      img = 'first.jpg';
      break;
    case 'About':
      img = 'second.jpg';
      break;
   } 
   $('body').css({backgroundImage:'url(image/'+img+')'});
});

0 голосов
/ 26 мая 2011

Попробуйте установить свойство background: 

function changeIt() {
  document.getElementById('menuTab').style.background = "url(../images/tab_off.png)";
}

Возможно, <li> s не позволяют фону быть видимым.Можете ли вы применить этот стиль непосредственно в таблицу стилей и посмотреть, что произойдет?

0 голосов
/ 26 мая 2011

Ваш браузер будет перенаправлен на значение в атрибуте href, который является названием ссылки для вас.Вместо этого используйте changeIt(); return false в обработчиках onclick.

...