Jump to content
DarkAngel

Esconder conteudo dendro de div

Recommended Posts

DarkAngel

Bom dia!

Estou a fazer um secript que me permita esconder e mostrar o conteudo do meu site baseado em ajax e jquery.

O meu objetivo é mostrar o conteudo sem fazer reload à página e, se a página já tiver sido carregada, simplesmente esconder a outra e mostrar essa.

divs:

<div id="content">

            <div class="loader1" style="display: none">
                <img src="~/img/dragon.gif" alt="Loading..." />
            </div>

            <div id="content1">
                @RenderBody()
            </div>
            <div id="content2">
            </div>
        </div>

Script:

<script>


    $(".teste a").on("click", function () {
        var sel = $(this).attr("data-sub");
        if ($(this).attr('data-loaded') == 'true') {                                                                                                 //VERIFICAR SE JA FOI CARREGADO   ✓
            console.log('esta div já existe!');
            console.log($(this).attr("data-sub"));

            if (($("div." + sel).attr("class")) != sel) {                                            //SE SIM ESCONDE ANTERIOR E MOSTRA ATUAL
                
                $(sel).hide();
                console.log('Esconder esta div');
            } else {
                $(sel).show();
                console.log('Mostrar esta div');
            }

        } else {
            console.log('esta div NÃO existe!');
            $(this).attr('data-loaded', 'true');

            $(".loader1").show();                                                                                                                                     //ATIVA LOADING   ✓
            $.ajax({                                                                                                         //SE NAO PEDIDO AJAX AO URL CORRESPONDENTE DINAMICAMENTE   ✓
                type: 'GET',
                url: '/' + $(".main a").attr('data-main') + '/' + $(this).attr('data-sub'),
                success: function (data) {

                        if ($(data).text() != '') {                                                                                                     //VERIFICAR SE TRAZ RESULTADO   ✓
                            $("#content2").add('<div id="cont" class="' + sel + '"' + '>' + data + '</div>').appendTo('#content2');                    //SE SIM ADICIONA AO CONTAINER   ✓
                            $("#content1").hide();
                        } else {
                            alert('O container está vaziu!');
                        }
                    },
                complete: function () {
                    $(".loader1").hide();                                                                                                                          //DESATIVA LOADING   ✓
                },
                return: false,
            });
        }
    });
</script>

navbar:

<div class="sidebar-header">
        <a href="../home"><img src="/img/logodrakoons.png" alt="Alternate Text" class="imgresponsive" /></a>
    </div>
    <ul class="list-unstyled components">
        <i class="fas fa-home paddingleft" style="font-size: 20px"></i><a href="../home"> Início</a>
        <li class="main">
            <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" data-main="portfolio">Portfólio</a>
            <ul class="dro collapse list-unstyled" id="homeSubmenu">
                <li class="teste">
                    <a href="#" data-url="/portfolio/artworks" data-loaded="false" data-sub="artworks"> Artworks</a>
                </li>
                <li class="teste">
                    <a href="#" data-url="/portfolio/logotipos" data-loaded="false" data-sub="logotipos">Logótipos</a>
                </li>
                <li class="teste">
                    <a href="#" data-url="/portfolio/banners" data-loaded="false" data-sub="banners">Banners</a>
                </li>
                <li class="teste">
                    <a href="#" data-url="/portfolio/videos" data-loaded="false" data-sub="videos">Videos</a>
                </li>
            </ul>
        </li>
        <li class="main">
            <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle art" id="teste" data-main="artistas">Artistas</a>
            <ul class="drop collapse list-unstyled" id="pageSubmenu">
                <li>
                    <a id="art" href="/artistas/daxter">Daxter</a>
                </li>
                <li>
                    <a id="art" href="/artistas/darkangel">DarkAngel</a>
                </li>
            </ul>
        </li>
    </ul>

Obrigado!

Share this post


Link to post
Share on other sites
DarkAngel

No script já adicionei isto:

$("." + $(this).attr("data-sub")).show();
            $('#cont').not("." + $(this).attr("data-sub")).hide();

e acontece o seguinte:
clico na aba Artworks e ele carrega a pagina artworks
depois clico na aba Logótipos e ele substitui a artworks
mas depois se clicar noutra aba, ele simplesmente adiciona por baixo dos logotipos em vez de o substituir tambem...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.