Как создать функцию для изменения заголовка баннера при использовании вкладок JQuery - PullRequest
0 голосов
/ 08 февраля 2012

У меня есть 3 вкладки jquery по умолчанию для загрузки внешнего контента.

Однако мне нужно следующее добавление / привязка, и мне было интересно, может ли кто-нибудь помочь мне с этой проблемой;

  1. Так же, как при загрузке содержимого каждой вкладки, мне нужен другой баннер заголовка для отображения (вне вкладки countainer..так у меня в основном есть идентификатор с именем #bannerAd), когда каждая вкладка выбрана.

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

Я действительно надеюсь, что это имеет смысл, надеюсь, кто-томожет помочь.

<script type="text/javascript">
$(function(){

    // Tabs
    $('#tabs').tabs();
    //hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
    function() { $(this).addClass('ui-state-hover'); }, 
    function() { $(this).removeClass('ui-state-hover'); }
    );

    });
    </script>
    </head>
    <body>

    <!-- Tabs -->
    <h2 class="demoHeaders"></h2>
    <div id="tabs">
    <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1">Lorem ipsum dolor</div>
    <div id="tabs-2">Phasellus mattis tincidunt nibh.</div>
    </div>

Ответы [ 2 ]

0 голосов
/ 09 февраля 2012

Вы также можете разместить атрибуты данных по одной на каждой из ваших вкладок.

<li><a href="#tabs-1" data-bannerurl="banner1.png">First</a></li>
<li><a href="#tabs-2" data-bannerurl="banner2.png">Second</a></li>
<li><a href="#tabs-3" data-bannerurl="banner3.png">Third</a></li>

Тогда в вашем JQuery

$("#tabs li a").click(function() {
    var bannerUrl = $(this).data().bannerurl;
    $("#bannerAd").attr("src", bannerUrl);
});

Живи в действии здесь: http://jsbin.com/iquluz/5/edit#javascript,html,live

0 голосов
/ 08 февраля 2012

Что-то вроде этого может быть самым простым:

$("#tabs li a").click(function() {

switch($("this").attr("href")) {

case "#tabs-1":
//Load First Banner
break;

case "#tabs-2":
//Load Second Banner
break;

case "#tabs-3":
//Load Third Banner
break;

}

});

Это в основном настроит событие нажатия на кнопки, которые будут срабатывать при каждом нажатии любой из них.Затем он выяснит, какая кнопка была нажата, и соответствующим образом изменит баннер.

И вы захотите поместить его в свой $(function()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...