在 jQuery 选项卡菜单中相应地更改背景

Question

我正在开发一个带有选项卡菜单的网站，您可以在不同的选项卡之间切换有关（系列）角色的信息。我遵循了 jQuery 的简单教程，菜单工作正常，但我想根据当前选择的角色相应地更改菜单的背景。这是基本代码：

Javascript:

<head>
<script type="text/javascript" src="etc/jquery-1.6.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
var tabs = $('#menuv_characters_titles li');
var contents = $('#menuv_characters_contents li');

tabs.bind('click',function(){
  contents.hide();
  tabs.removeClass('current_title');
  $(contents[$(this).index()]).show(); //show tab content that matches tab title index
  $(this).addClass('current_title');
});
});
</script>
</head>

HTML:

<div id="menuv_characters">
    <ul id="menuv_characters_titles">
        <li class="current_title">
            Character 1
        </li>
        <li>
            Character 2
        </li>
        <li>
            Character 3
        </li>
        <li>
            Character 4
        </li>
    </ul>
    <ul id="menuv_characters_contents">
        <li>Text 1</li>
        <li>Text 2</li>
        <li>Text 3</li>
        <li>Text 4</li>
    </ul>
</div>

我的问题是：如何获取当前选中的标签页的名称或索引（标识符↓），以便相应地更改背景图片？

$('#menuv_characters_titles').css('background-image', 'url(img/'+Identifier+'.png)');

Answer 1

要获取当前所选选项卡的索引，您只需调用 $(this).index();

所以你可以这样做：

var Identifier = $(this).index();

$('#menuv_characters_titles').css('background-image', 'url(img/frame_'+Identifier+'.png)');

另外 .bind() 已被弃用，使用 .on() 代替您的点击事件或简单地调用：

tabs.click(function(){

如果您愿意，也可以将图像名称作为数据属性添加到 li：

<li data-image="frame_1">text</li>

然后像这样在你的点击事件中拉动它：

var Identifier = $(this).data("image");

$('#menuv_characters_titles').css('background-image', 'url(img/'+Identifier+'.png)');

在 jQuery 选项卡菜单中相应地更改背景

Change background accordingly in jQuery tab menu

html

javascript

jquery

background-image