locked
CSS Tabs - keep current open when windows pane clicked? RRS feed

  • Question

  • User1909155429 posted
    I have this example of a CSS style tab display. 
    I want to keep current tab open when window pane is clicked.Only allow close when alternative tab clicked?

    <a tabindex="1" class="testA" >Test A</a> | <a tabindex="2" class="testB">Test B</a> <div class="hiddendiv" id="testA">1</div> <div class="hiddendiv" id="testB">2</div> </div> CSS <STYLE> .testA:focus ~ #testA {display: block; } .testB:focus ~ #testB {display: block; } .hiddendiv:focus{ display:block; } </STYLE>

    Thursday, October 22, 2020 1:36 PM

Answers

  • User-939850651 posted

    Hi peterthegreat,

    If you want to achieve this requirement through pure JavaScript, you could get the target of the click event and determine its class name. Then make the corresponding actions.

    Please refer to the following code:

    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--<script src="Scripts/jquery-3.5.1.min.js"></script>-->
        <style>
            .hiddendiv {
                display: none;
            }
        </style>
    </head>
    <body>
        <div>
            <a tabindex="1" class="testA">Test A</a> | <a tabindex="2" class="testB">Test B</a>
            <div class="hiddendiv" id="testA">1</div>
            <div class="hiddendiv" id="testB">2</div>
        </div>
    </body>
    </html>
    <script>
        //$(document).ready(function () {
        //    $('.testA').focus(function () {
        //        $("#testA").removeClass('hiddendiv');
        //        $("#testB").addClass('hiddendiv');
        //    });
    
        //    $('.testB').focus(function () {
        //        $("#testB").removeClass('hiddendiv');
        //        $("#testA").addClass('hiddendiv');
        //    });
        //})
        window.onclick = function (e) {
    
            if (e.target.className == "testB") {
                document.getElementById('testB').classList.remove('hiddendiv');
                document.getElementById('testA').classList.add('hiddendiv');
            }
            if (e.target.className == "testA") {
                document.getElementById('testA').classList.remove('hiddendiv');
                document.getElementById('testB').classList.add('hiddendiv');
            }
        }
    </script>

    Hope this can help you.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 28, 2020 6:38 AM

All replies

  • User-939850651 posted

    Hi peterthegreat,

    According to your description, have you tried to use JavaScript to achieve your requirements?

    Something like this:

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="Scripts/jquery-3.5.1.min.js"></script>
        <style>
            .hiddendiv {
                display: none;
            }
        </style>
    </head>
    <body>
        <div>
            <a tabindex="1" class="testA">Test A</a> | <a tabindex="2" class="testB">Test B</a>
            <div class="hiddendiv" id="testA">1</div>
            <div class="hiddendiv" id="testB">2</div>
        </div>
    </body>
    </html>
    <script>
        $(document).ready(function () {
            $('.testA').focus(function () {
                $("#testA").removeClass('hiddendiv');
                $("#testB").addClass('hiddendiv');
            });
    
            $('.testB').focus(function () {
                $("#testB").removeClass('hiddendiv');
                $("#testA").addClass('hiddendiv');
            });
        })
    </script>

    Result:

    Best regards,

    Xudong Peng

    Friday, October 23, 2020 3:16 AM
  • User1909155429 posted

    Its a nice way! but can it be done using javascript instead? I do have it operating in jquery though! 

      window.onclick = function (event) {}
    also, what would you suggest to highlight selected text to make further improvements to design

    Thanks

    Friday, October 23, 2020 2:27 PM
  • User-939850651 posted

    Hi peterthegreat,

    If you want to achieve this requirement through pure JavaScript, you could get the target of the click event and determine its class name. Then make the corresponding actions.

    Please refer to the following code:

    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--<script src="Scripts/jquery-3.5.1.min.js"></script>-->
        <style>
            .hiddendiv {
                display: none;
            }
        </style>
    </head>
    <body>
        <div>
            <a tabindex="1" class="testA">Test A</a> | <a tabindex="2" class="testB">Test B</a>
            <div class="hiddendiv" id="testA">1</div>
            <div class="hiddendiv" id="testB">2</div>
        </div>
    </body>
    </html>
    <script>
        //$(document).ready(function () {
        //    $('.testA').focus(function () {
        //        $("#testA").removeClass('hiddendiv');
        //        $("#testB").addClass('hiddendiv');
        //    });
    
        //    $('.testB').focus(function () {
        //        $("#testB").removeClass('hiddendiv');
        //        $("#testA").addClass('hiddendiv');
        //    });
        //})
        window.onclick = function (e) {
    
            if (e.target.className == "testB") {
                document.getElementById('testB').classList.remove('hiddendiv');
                document.getElementById('testA').classList.add('hiddendiv');
            }
            if (e.target.className == "testA") {
                document.getElementById('testA').classList.remove('hiddendiv');
                document.getElementById('testB').classList.add('hiddendiv');
            }
        }
    </script>

    Hope this can help you.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 28, 2020 6:38 AM