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)');

{@ 1}}不建议使用.bind()代替您的点击事件或只是致电：

.on()

如果您愿意，也可以将图片名称作为数据属性添加到tabs.click(function(){：

li

然后将其拉到你的点击事件上，如下所示：

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

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

1 个答案: