从父页面向元素添加类

时间:2013-11-22 18:02:53

标签: jquery html

好的..我有一些父母页面,我们称之为 test.html

在该页面内,我正在加载其他2个外部网页: test1.html test2.html

使用此脚本:

$("#linhas_cat li a").click(function(e) {
            e.preventDefault();
            var current_linha = $(this).attr("class");
            var current_link = $(this).attr("href");
            var alternate_link = $(this).attr("data-link");

            $('#linhas_cat li a').removeClass('active');

            $("#wrap_linhas_fake ul li").css("background", "#b0aa9d");

            $(this).addClass('active');

            $("#wrap_linhas_fake ul li").filter("." + current_linha).css("background", "#ed1d24");

            $("#container_produto").load(current_link).hide().fadeIn('slow'); //external page test1.html
            $(".conteudo_catalogo").load(alternate_link).hide().fadeIn('slow');//external page test2.html

        });

页面内部 teste2.html 我有一些菜单。像这样:

<ul class="nome_linhas">
    <li><a href="exibe_linhas.html?sublinha=1">Nome da Linha</a></li>
    <li><a href="exibe_linhas.html?sublinha=2">Nome da Linha</a></li>
    <li><a href="exibe_linhas.html?sublinha=3">Nome da Linha</a></li>
    <li><a href="exibe_linhas.html?sublinha=4">Nome da Linha</a></li>
</ul>

我需要在点击链接时应用一个类。类active,但同时,我必须在div .conteudo_catalogo

内的同一个地方打开您的链接(exibe_linhas.html?sublinha = 1)

我在“母亲”页面上尝试过这种方式:

<script type="text/javascript">
  jQuery(document).ready(function($){
    $(".conteudo_catalogo .nome_linhas li a").live('click', function(e) {
        e.preventDefault();
        var teste_link = $(this).attr("href");
        $(".conteudo_catalogo .nome_linhas li a").removeClass('active');
        $(".conteudo_catalogo").load(teste_link).hide().fadeIn('slow');
        $(this).addClass('active');
    });
  });
</script>

但是,当加载页面时,没有添加类......

如何处理?

1 个答案:

答案 0 :(得分:2)

$(".conteudo_catalogo").on('click', '.nome_linhas li a', function(e) {
    e.preventDefault();

    var idx = $(this).closest('li').index();

    $(".conteudo_catalogo").hide().load(this.href, function() {
        $(".nome_linhas li:eq("+idx+")", this).addClass('active')
        $(this).fadeIn('slow');
    });
});