Показывать или скрывать div с javascript в виде ASP.NET MVC

Я trantando способствования, тому, чтобы нажав на какую-либо из статей navbar, он способствовал тому, чтобы он явился определенным div и скрыл оставшуюся часть, но не засолил меня.

Я использую очень мало javascript а следовательно я не замечаю каков это проблема. Я оставляю им мой код, информация внутри divs эта опустошает, потому что я достал ее, чтобы мочь прикреплять ее здесь.

<section>
<div class="card card-signin my-5">
    <div class="card-header text-center">
        <nav class="nav nav-pills nav-fill">
            <a id="btn-informacion" class="nav-item nav-link" href="#">Informacion</a>
            <a id="btn-notas" class="nav-item nav-link active" href="#">Notas</a>
            <a id="btn-documentos" class="nav-item nav-link" href="#">Documentos</a>
        </nav>
    </div>
    <div id="div-info" class="card-body text-center"> </div>
    <div id="div-notas" class="card-body text-center"> </div>
    <div id="div-doc" class="card-body text-center"> </div>
</div>

И внутри @section scripts:

<script>
    $(document).ready(function () {
        $("#btn_informacion").click(function () {
            $('#div-info').show();
            $('#div-notas').hide();
            $('#div-doc').hide();
        });
        $("#btn_notas").click(function () {
            $('#div-info').hide();
            $('#div-notas').show();
            $('#div-doc').hide();
        });
        $("#btn_documentos").click(function () {
            $('#div-info').hide();
            $('#div-notas').hide();
            $('#div-doc').show();
        });            
    });
</script>

Какая-то подсказка? Спасибо.

-1
задан 31.10.2019, 03:44
1 ответ

PodrГ, - чтобы это тестировать?

Html:

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

<div class="card card-signin my-5">
    <div class="card-header text-center">
        <nav class="nav nav-pills nav-fill">
            <a id="btn-informacion" class="nav-item nav-link" href="#">Informacion</a>
            <a id="btn-notas" class="nav-item nav-link active" href="#">Notas</a>
            <a id="btn-documentos" class="nav-item nav-link" href="#">Documentos</a>
        </nav>
    </div>
    <div id="div-info" class="card-body text-center">DIV-INFO</div>
    <div id="div-notas" class="card-body text-center">DIV-NOTAS</div>
    <div id="div-doc" class="card-body text-center">DIV-DOC</div>
</div>

<script>        
    $(document).ready(function () {
        $("#btn-informacion").click(function () {
            console.log("#btn-informacion clicked");
            $('#div-info').show();
            $('#div-notas').hide();
            $('#div-doc').hide();
        });
        $("#btn-notas").click(function () {
            console.log("#btn-notas clicked");
            $('#div-info').hide();
            $('#div-notas').show();
            $('#div-doc').hide();
        });
        $("#btn-documentos").click(function () {
            console.log("#btn-documentos clicked");
            $('#div-info').hide();
            $('#div-notas').hide();
            $('#div-doc').show();
        });            
    });
</script>

Это JS Bin .

Надеялся, что он этому помогает...

0
ответ дан 01.12.2019, 14:44

Теги

Похожие вопросы