UPDATE: Link zur Website http://lucasvallim.com/previews/example/servicos.html

Ich muss alle IDs aller .item_index li auf dem div entfernen und anschließend die ID #servico_ativo zu der ID hinzufügen, auf die geklickt wurde.

Es funktioniert nur einmal, die anderen Klicks fügen nur die ID zum angeklickten Link hinzu und entfernen die IDs nicht mehr ...

ODER, wenn möglich, wäre eine andere Lösung, Klasse anstelle von ID zu verwenden. aber in diesem Fall müsste ich nur die Klasse "servico_ativo" aus allen li-Elementen entfernen und dann dieselbe Klasse zum angeklickten Element hinzufügen.

Die ID "servico_ativo" fügt ein CSS hinzu, um die Schriftarten fett zu machen, und auch einen Hintergrund für das Li-Element, auf das der Benutzer geklickt hat. Es ist ganz einfach, aber ich bin noch nicht so gut mit jquery.

Alle Lösungen sind willkommen.

Irgendein Vorschlag?

$("a.click_assessoria").click(function(){ 

    $(".conteudo_dinamico").empty() 

    $.get('assessoria.html', function(result) {
        $('.conteudo_dinamico').append(result);
    });


    $(".item_index").removeAttr("id");

    $(this).attr('id', 'servico_ativo');



});

$("a.click_projeto").click(function(){ 

    $(".conteudo_dinamico").empty() 

    $.get('projeto.html', function(result) {
        $('.conteudo_dinamico').append(result);
    });

    $(".item_index").removeAttr("id");

    $(this).attr('id', 'servico_ativo');



});

$("a.click_instalacao").click(function(){ 

    $(".conteudo_dinamico").empty() 

    $.get('instalacao.html', function(result) {
        $('.conteudo_dinamico').append(result);
    });

    $(".item_index").removeAttr("id");

    $(this).attr('id', 'servico_ativo');



});
1
Lucas Vallim da Costa 9 Dez. 2013 im 09:47

4 Antworten

Beste Antwort

Wie sich herausstellte, hatte dies nichts mit der Ereignisdelegierung zu tun. Das Problem bestand darin, den aktiven Status zuzuweisen

$(".item_index").removeAttr("id");
$(this).parent().attr('id', 'servico_ativo');

Darauf können nur wenige Verbesserungen angewendet werden

  1. Verwenden Sie data-*, um den Zielressourcenpfad zu speichern
  2. Verwenden Sie eine Klasse namens active, um auf das aktive Navigationselement zu verweisen

Versuchen

<a href="#" class="item_index click click_assessoria" data-target="assessoria.html">assessoria</a>
<a href="#" class="item_index click click_projeto" data-target="assessoria.html">assessoria</a>
<a href="#" class="item_index click click_instalacao" data-target="instalacao.html">instalacao</a>

Dann

var $dinamico = $('.conteudo_dinamico');
$('a.click').on('click', function () {
    $dinamico.empty()
    $.get($(this).data('target'), function (result) {
        $dinamico.append(result);
        $(".item_index").removeClass("active");
        $(this).parent().addClass('servico_ativo');
    });
});
2
Arun P Johny 9 Dez. 2013 im 06:54

Sie geben mehreren HTML-Elementen dasselbe id. id s sollten in einem HTML-Dokument immer eindeutig sein.

Anstatt das id der Elemente festzulegen, können Sie ihm ein class zuweisen. Im Gegensatz zu id können mehrere HTML-Elemente dasselbe class haben.

Veränderung

$(this).attr('id', 'servico_ativo');

Mit

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

0
Aurélien Gasser 9 Dez. 2013 im 06:01

Kein Problem mit deinem Code-Typ ...

Sie brauchen kleine Änderungen ...

Mit Ordinary Click werden keine Ereignishandlerfunktionen für ein oder mehrere Ereignisse angehängt. Verwenden Sie also die Methode on - Fügen Sie den ausgewählten Elementen eine Ereignishandlerfunktion für ein oder mehrere Ereignisse hinzu.

Probieren Sie diesen Code aus und verweisen Sie auf diesen Link:

Jquery .on () Methode

Richtige Verwendung der .on-Methode in Jquery

$(document).ready(function(){
$(document).on('click', "a.click_assessoria", function () {
$(".conteudo_dinamico").empty()
$.get('assessoria.html', function (result) {
    $('.conteudo_dinamico').append(result);
});
$(".item_index").removeAttr("id");
$(this).attr('id', 'servico_ativo');
});

$(document).on('click', "a.click_projeto", function () {
$(".conteudo_dinamico").empty()
$.get('projeto.html', function (result) {
    $('.conteudo_dinamico').append(result);
});
$(".item_index").removeAttr("id");
$(this).attr('id', 'servico_ativo');
});

 $(document).on('click', "a.click_instalacao", function () {
$(".conteudo_dinamico").empty()
$.get('instalacao.html', function (result) {
    $('.conteudo_dinamico').append(result);
});
$(".item_index").removeAttr("id");
$(this).attr('id', 'servico_ativo');
});

});

0
Community 23 Mai 2017 im 12:20

Verwenden Sie On () anstelle von click ()

$( "a.click_assessoria" ).on("click",function(){

$(".conteudo_dinamico").empty() 

$.get('assessoria.html', function(result) {
    $('.conteudo_dinamico').append(result);
    $(".item_index").removeAttr("id");

    $(this).attr('id', 'servico_ativo');
});

});


$( "a.click_projeto" ).on("click",function(){ 

$(".conteudo_dinamico").empty() 

$.get('projeto.html', function(result) {
    $('.conteudo_dinamico').append(result);
$(".item_index").removeAttr("id");

$(this).attr('id', 'servico_ativo');
});



});


$( "a.click_instalacao" ).on("click",function(){

$(".conteudo_dinamico").empty() 

$.get('instalacao.html', function(result) {
    $('.conteudo_dinamico').append(result);
 $(".item_index").removeAttr("id");

$(this).attr('id', 'servico_ativo');
});



});
1
sumit 9 Dez. 2013 im 07:18