Как изменить фон веб-страницы при изменении подменю?

Я преподаю php/html/css и застрял в том, как изменить фон страницы для каждой подстраницы.Как изменить фон веб-страницы при изменении подменю?

Пример:

когда на главной странице, если нажать на «заголовок> контакты» фон изменится на новое изображение.

Я пробовал в css, но он не меняет изображение всей страницы, так как то, что я меняю, находится в <section>.

Webpage обучения (http://kamiexp.co.nf)

источник

2015-12-26 Tiago Silva

В JavaScript 'YOURELEMENT.style.background =«...»' – CoderPi

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

Вам нужно Javascript для достижения этой цели. Учитывая следующий html.

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="script.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <header> 
    some content 
    </header> 
    <button id="toggleColor">click</button> 
</body> 
</html>

Просто создайте новый файл в том же каталоге под названием script.js и добавьте этот код.

(function($){ 

    var $toggle = $('#toggleColor'); 
    var $header = $('header'); 

    $toggle.click(function(){ 

    $header.css('background', 'red'); 

    }); 
})(jQuery);

когда кнопка с идентификатором toggleColor щелкают, header элемент изменит цвет. Чтобы узнать, как работает JQuery, я бы рекомендовал вам начать работу Jquery tutorial

Возможно, вы также захотите toggleClass. Для этого просто создайте правило css, подобное этому .red{background:red;}, а затем просто сделайте $header.toggleClass('red'). Я обновил ссылку Demo.

Demo

источник

2015-12-26 11:56:34

i undestand jquery немного, но то, что вы сказали, заставляет меня сделать botton, который я уже сделал и определил. На веб-странице, которую я определил, есть тренировка, вы можете видеть, что фоновое скручивание имеет слайд-шоу, сделанное в javascript. теперь, что я хочу, для каждого тега (пример #visao) изменение фонового изображения. Я смог изменить это, но поскольку каждый тег находится под

, фоновое изображение не заполняет всю страницу, только часть

. Благодарю вас за быстрый авер. –

Этот же код будет работать с любой кнопкой, вам просто нужно обновить имя 'id'. –

Как правило для чего-нибудь динамичного, что происходит на странице без обновления, для всех, кроме самых простых действий (исключение составляют на основе CSS - анимации, зависания и т.д.), вы будете нуждаться в JavaScript ,

Забудьте об использовании JQuery, поскольку он использует механизм sizzle для синтаксического анализа DOM снова и снова, вместо использования кеша DOM, из-за устаревших лет назад, поэтому современные фреймворки (основание6 и я подозреваю бутстрап) покинут его сейчас что поддержка IE не обязательно должна быть такой же всеобъемлющей, как и выпуск windows10 и edge.

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

Если вы ищете способ кодирования модульной ванили Javascript, я рекомендую смотреть следующие playlist.

Что касается библиотек, вы должны исследовать и выбирать для себя, так как есть немало доступных, однако моя собственная рекомендация будет vueJS.

источник

2015-12-26 12:38:40

вот мой подход:

JsFiddle Demo

Идея:

Put имя класса в ссылке меню

Создание массива фонового изображения menu_bg с индексом класса меню.

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

$(document).ready(function() { \t 
 
    $("body").css("background-image","url(http://www.nshorephoto.com/greenscreen/fotolia_5650339_xxl_std.jpg)"); 
 
    \t \t 
 
    \t var menu_bg = []; 
 
\t menu_bg['Empresa_bg'] ='http://www.nshorephoto.com/greenscreen/fotolia_5650339_xxl_std.jpg'; 
 
\t menu_bg['Missao_bg'] ='http://orig15.deviantart.net/1c5c/f/2009/109/0/5/sample_background_5_by_hiagain69.jpg'; 
 
\t menu_bg['Valores_bg'] ='http://image.slidesharecdn.com/sonicsamplebluebackground-121213031816-phpapp01/95/sonic-sample-blue-background-1-638.jpg?cb=1355390411'; 
 
\t menu_bg['Visao_bg'] ='http://blogs.flexerasoftware.com/common/images/backgrounds/green.jpg '; 
 
\t menu_bg['Projectos_bg'] ='http://blogs.flexerasoftware.com/common/images/backgrounds/orange.jpg'; 
 
\t menu_bg['Contactos_bg'] ='https://s-media-cache-ak0.pinimg.com/736x/e0/90/af/e090af3fff9fbccdb460019c1c6e3594.jpg'; 
 

 
\t var menu_class; 
 
\t var bg_color; 
 
\t var bg_img; 
 

 
\t $("ul li a").on("click", function (e){ \t 
 
\t \t menu_class = $(this).attr('class'); 
 
\t \t bg_img = menu_bg[menu_class]; 
 
\t \t $("body").css("background-image","url("+bg_img+")"); 
 
\t \t //e.preventDefault(); \t \t \t 
 
\t }); 
 
\t 
 
});

#menu 
 
{ 
 
\t margin-top:15px 
 
} 
 

 
#menu ul 
 
{ 
 
\t list-style:none; 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
#menu ul a 
 
{ 
 
\t display:block; 
 
\t color:#333; 
 
\t text-decoration:none; 
 
\t font-weight:700; 
 
\t font-size:12px; 
 
\t line-height:32px; 
 
\t padding:0 15px; 
 
\t font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif 
 
} 
 

 
#menu ul li 
 
{ 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
#menu ul li.current-menu-item 
 
{ 
 
\t background:#ddd 
 
} 
 

 
#menu ul li:hover 
 
{ 
 
\t background:#f6f6f6 
 
} 
 

 
#menu ul ul 
 
{ 
 
\t display:none; 
 
\t position:absolute; 
 
\t top:100%; 
 
\t left:0; 
 
\t background:#fff; 
 
\t padding:0 
 
} 
 

 
#menu ul ul li 
 
{ 
 
\t float:none; 
 
\t width:200px 
 
} 
 

 
#menu ul ul a 
 
{ 
 
\t line-height:120%; 
 
\t padding:10px 15px 
 
} 
 

 
#menu ul ul ul 
 
{ 
 
\t top:0; 
 
\t left:100% 
 
} 
 

 
#menu ul li:hover > ul 
 
{ 
 
\t display:block 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<nav id="menu"> 
 
\t <ul class="sf-js-enabled"> 
 
\t \t <li class="with_ul active"> 
 
\t \t \t <a href="#!/empresa" class="Empresa_bg" style="color: rgb(50, 74, 241);">Empresa</a> 
 
\t \t </li> 
 
\t \t <li class=""><a href="#!/missao" class="Missao_bg" style="color: rgb(255, 255, 255);">Missão</a></li> 
 
     <li class=""><a href="#!/valores" class="Valores_bg" style="color: rgb(255, 255, 255);">Valores</a></li> 
 
     <li><a href="#!/visao" class="Visao_bg" style="color: rgb(255, 255, 255);">Visão</a></li> 
 
     <li><a href="#!/projectos" class="Projectos_bg" style="color: rgb(255, 255, 255);">Projectos</a></li> 
 
\t \t <li><a href="#!/contacts" class="Contactos_bg" style="color: rgb(255, 255, 255);">Contactos</a></li> 
 
\t </ul> 
 
</nav>

источник

2015-12-26 12:50:55

@Tiago Silva Я думаю, что это решит вашу проблему. –

, в то время как ваш код делает то, что я хотел, но теперь меню меняют только фон и не продвигаются на странице. argh ... несколько раз я думаю, что я двигаюсь назад вместо фола. какая часть в .js я меняю это? –

bro вам нужно удалить e.preventDefault(); то это будет прекрасно –

Как изменить фон веб-страницы при изменении подменю?

ответ

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