使用 jquery 选项卡时如何创建更改标题横幅的功能答案

【问题标题】：how do i create a function to change header banner when using jquery tabs使用 jquery 选项卡时如何创建更改标题横幅的功能
【发布时间】：2012-02-08 15:42:47
【问题描述】：

我有 3 个默认的 jquery 选项卡加载外部内容。

但是我需要以下添加/绑定，并且想知道是否有人可以帮助我解决这个问题；

除了加载每个选项卡的内容外，我还需要在选择每个选项卡时显示不同的标题横幅（在选项卡计数器之外..所以我基本上有一个名为#bannerAd 的 ID）。
应该设置编码，以便用户可以从页面外部直接链接到每个选项卡（并且每个横幅都应该相应地加载。）

我真的希望这是有道理的，希望有人可以提供帮助。

<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>

【问题讨论】：

标签： jquery-ui jquery jquery-selectors tabs

【解决方案1】：

您还可以将数据属性放在每个选项卡中。

<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

【讨论】：

这看起来不错，但是当我编译页面时它没有显示横幅。 ..虽然没有显示错误：s
刚刚更新了现场直播 sn-p，jsbin.com/iquluz/3/edit。如果您对在那里找到的代码有任何疑问，请告诉我。
伊恩太好了，但是我需要横幅来自动加载您当前所在的任何标签，现在 content8.flixster.com/movie/11/16/12/11161270_mob.jpg" /> 显示，但我需要让它加载加载哪个默认选项卡....希望这是有道理的。
您最初可以保留<img id="bannerAd" src="" />，然后执行以下操作：var defaultBannerUrl = $(".ui-tabs-selected > a").data().bannerurl; $("#bannerAd").attr("src", defaultBannerUrl); 在您的 .tabs() 调用之后，此处说明为 jsbin.com/iquluz/5/edit
然后，当您通过单击选项卡进行更改时，横幅广告也会更改。以便您的横幅广告反映用户当前所在的任何标签。这些都在最新的 jsbin 链接中。

【解决方案2】：

这样的事情可能是最简单的事情：

$("#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()

【讨论】：