单击 IMG 到 go 到 bootstrap 5 中的特定选项卡后是否有可能？

Question

单击 IMG 到 go 到 bootstrap 5 中的特定选项卡后是否有可能？

不幸的是，IMG 代码中的 href 在这种情况下不起作用。

单击第一个img 后，我想将 go 转到“关于我”选项卡
单击第二个img 后，我想将 go 转到“项目”选项卡
单击第三个img 后，我想 go 到联系人选项卡

请在下面和 jsfiddle 上找到我的代码 - https://jsfiddle.net/84zyvu0t/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>

<body>

    <div class="menu">
        <ul class="nav nav-pills">
            <li class="nav-item menuItems">
                <a href="#aboutMe" class="nav-link active" data-bs-toggle="tab">About Me</a>
            </li>
            <li class="nav-item menuItems">
                <a href="#projects" class="nav-link" data-bs-toggle="tab">Projects</a>
            </li>
            <li class="nav-item menuItems">
                <a href="#contact" class="nav-link" data-bs-toggle="tab">Contact</a>
            </li>
        </ul>
    </div>

    <div class="tab-content">

        <!-- TAB NUMBER 1 - About Me -->

        <div class="tab-pane fade show active" id="aboutMe">
            <p>Hi, my name is Robert</p>
        </div>

        <!-- TAB NUMBER 2 - Projects -->

        <div class="tab-pane fade" id="projects">
            <p>This is a projects tab</p>
        </div>

        <!-- TAB NUMBER 3 - Contact -->

        <div class="tab-pane fade" id="contact">
            <p>Reach out to me</p>
        </div>

    </div>

    <a href="#aboutMe"><img src="https://picsum.photos/id/27/200/300" alt=""></a>
    <a href="#projects"><img src="https://picsum.photos/id/28/200/300" alt=""></a>
    <a href="#contact"><img src="https://picsum.photos/id/29/200/300" alt=""></a>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous">
        </script>

</body>

</html>

Answer 1

我从这个链接找到了一个解决方案（Jacob Goh 的解决方案）

如何使用 javascript 更改活动引导选项卡

您也可以使用 .tab('show') 以获得更大的灵活性

https://codepen.io/jacobgoh101/pen/ALELNr

go 到菜单 3 javascript：

function menu3(){ $('[href="#menu3"]').tab('show'); 引导文档： https://getbootstrap.com/javascript/#tabs

**但是** 我不得不将我的 imgs 变成按钮（可以这么说）所以我什至不确定这是否会在未来工作以及是否有任何后果以这种方式使用它们......

解决方案

 function aboutMeTab() { $('[href="#aboutMe"]').tab('show'); } function projectsTab() { $('[href="#projects"]').tab('show'); } function contactTab() { $('[href="#contact"]').tab('show'); }

 button { background-color: transparent;important: border; none:important; margin: 0;important; padding: 0 !important; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1,0"> <title>Document</title> </head> <body> <div class="menu"> <ul class="nav nav-pills"> <li class="nav-item menuItems"> <a href="#aboutMe" class="nav-link active" data-bs-toggle="tab">About Me</a> </li> <li class="nav-item menuItems"> <a href="#projects" class="nav-link" data-bs-toggle="tab">Projects</a> </li> <li class="nav-item menuItems"> <a href="#contact" class="nav-link" data-bs-toggle="tab">Contact</a> </li> </ul> </div> <div class="tab-content"> <:-- TAB NUMBER 1 - About Me --> <div class="tab-pane fade show active" id="aboutMe"> <p>Hi. my name is Robert</p> </div> <:-- TAB NUMBER 2 - Projects --> <div class="tab-pane fade" id="projects"> <p>This is a projects tab</p> </div> <.-- TAB NUMBER 3 - Contact --> <div class="tab-pane fade" id="contact"> <p>Reach out to me</p> </div> </div> <a href="#aboutMe"> <button class="btn btn-primary przycisk" onclick="aboutMeTab()"> <img src="https://picsum.photos/id/27/200/300" alt=""> </button> </a> <a href="#projects"> <button class="btn btn-primary przycisk" onclick="projectsTab()"> <img src="https://picsum.photos/id/28/200/300" alt=""> </button> </a> <a href="#contact"> <button class="btn btn-primary przycisk" onclick="contactTab()"> <img src="https.//picsum.photos/id/29/200/300" alt=""> </button> </a> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"> </script> </body> </html>