css 如何从外部链接导航到bootstrap 5的特定选项卡

mdfafbf1 于 2023-03-05 发布在 Bootstrap

关注(0)|答案(5)|浏览(138)

我想在用户点击另一个页面的链接后，将用户重定向到特定的标签页。下面是第一页的代码：index.html

<div class="products-btn">
    <a href="products.html#pills-profile">view all</a>
</div>

第2页产品.html：

<ul class="nav nav-pills justify-content-center" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs- 
         target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria- 
         selected="true">products</button>
    </li>
    <li class="nav-item" role="presentation">
         <button class="nav-link" id="solve" data-bs-toggle="pill" data-bs-target="#pills- 
          profile" type="button" role="tab" aria-controls="pills-profile" aria- 
          selected="false">solutions</button>
    </li>
</ul>

我想重定向用户从产品的按钮到解决方案选项卡。我正在使用 Bootstrap 5.1在我的所有网页。

css

来源：https://stackoverflow.com/questions/70819717/how-to-navigate-to-specific-tab-of-bootstrap-5-from-external-link

5条答案

按热度按时间

yyyllmsg1#

这是有点老了，所以不知道你是否找到了答案，但这是我的工作。

if(window.location.hash == '#someHash' ) { 
 var someVarName = document.querySelector('#theTabID'); // theTabID of the tab you want to open
 var tab = new bootstrap.Tab(someVarName);
 tab.show();
}

在 Bootstrap 5文档中找到：https://getbootstrap.com/docs/5.1/components/navs-tabs/#via-javascript

赞(0）回复(0）举报 2023-03-05

2g32fytz2#

只需在链接中的“#”<a href="products.html#solve">view all</a>后输入标签的ID

赞(0）回复(0）举报 2023-03-05

oalqel3c3#

检查根文件夹并写入从index.html到products.html的完整路径
然后加上这个

<a href="{your path to the page}/products.html#pills-tab">products</a>

示例：
我有索引和文件夹名为folder1在这个文件夹中，有另一个名为folder2的文件夹包含产品页面：

<a href="folder1/folder2/products.html">products</a>

另一个例子：
我想回到index.html：

<a href="../../index.html">products</a>

../表示返回上一个/父文件夹
anchor mozilla

赞(0）回复(0）举报 2023-03-05

ccrfmcuu4#

我还重新搜索了很多，这里我根据bootstrap 5编写代码，我有两个文件index.html和service.html，在service.html中，我有直接从索引菜单服务打开的选项卡

//add this in service.html

const hash=window.location.hash;
     const bsTab = new bootstrap.Tab(hash);
     bsTab.show();

<!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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
     <nav class="navbar navbar-expand-lg navbar-light lower-header">
      <div class="container-fluid">
        <a class="navbar-brand" href="index.html"><img class="logo-image" src="images/logo.png" alt="logo image"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="index.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About Us</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Services
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="services.html#web-application-tab">Web Application</a></li>
                <li><a class="dropdown-item" href="services.html#web-design-tab">Web Design</a></li>
                <li><a class="dropdown-item" href="services.html/#">Android Applications</a></li>
                <li><a class="dropdown-item" href="services.html">IOS Applications</a></li>
                <li><a class="dropdown-item" href="services.html">E-Commerce</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Product
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">StudentCares</a></li>
                <li><a class="dropdown-item" href="#">Graduex</a></li>
                <li><a class="dropdown-item" href="#">StudentCares ID</a></li>
                <li><a class="dropdown-item" href="#">Smart Class Room</a></li>
                <li><a class="dropdown-item" href="#">Sensify</a></li>
                <li><a class="dropdown-item" href="#">Mumbai Madiga Matrimony</a></li>
                <li><a class="dropdown-item" href="#">Hardware Product</a></li>
                <li><a class="dropdown-item" href="#">Electronic ID Card</a></li>
                <li><a class="dropdown-item" href="#">Gates & Barriers</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Testimonials</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">FAQ</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact Us</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
</body>
</html>

//here is service .html code

<!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 rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
</head>
<body>
    <div class="page-wrapper">

        <div class="preloader"></div>
        <header>
    
            <nav class="navbar navbar-expand-lg navbar-light lower-header">
              <div class="container-fluid">
                <a class="navbar-brand" href="index.html"><img class="logo-image" src="images/logo.png" alt="logo image"></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                  <ul class="navbar-nav">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">About Us</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Services
                      </a>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Web Application</a></li>
                        <li><a class="dropdown-item" href="#">Web Design</a></li>
                        <li><a class="dropdown-item" href="#">Android Applications</a></li>
                        <li><a class="dropdown-item" href="#">IOS Applications</a></li>
                        <li><a class="dropdown-item" href="#">E-Commerce</a></li>
                      </ul>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Product
                      </a>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">StudentCares</a></li>
                        <li><a class="dropdown-item" href="#">Graduex</a></li>
                        <li><a class="dropdown-item" href="#">StudentCares ID</a></li>
                        <li><a class="dropdown-item" href="#">Smart Class Room</a></li>
                        <li><a class="dropdown-item" href="#">Sensify</a></li>
                        <li><a class="dropdown-item" href="#">Mumbai Madiga Matrimony</a></li>
                        <li><a class="dropdown-item" href="#">Hardware Product</a></li>
                        <li><a class="dropdown-item" href="#">Electronic ID Card</a></li>
                        <li><a class="dropdown-item" href="#">Gates & Barriers</a></li>
                      </ul>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Testimonials</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">FAQ</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Contact Us</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
          </header>
          <div class="container-fluid main-container">
          <section class="page-heading-section" id="particles-js">
            <div class="page-heading">
                <h1>Services</h1>
            </div>
          </section>
          <section class="service-content-section">
                <div class="tab-container">
                    <div class="row">
                        <div class="col-lg-8 col-md-8 col-sm-12 tab-col">
                          <div class="service-tab-container">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link active" id="web-application-tab" data-bs-toggle="tab" data-bs-target="#web-application-tab-pane" type="button" role="tab" aria-controls="web-application-tab-pane" aria-selected="true">Web Application</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="web-design-tab" data-bs-toggle="tab" data-bs-target="#web-design-tab-pane" type="button" role="tab" aria-controls="web-design-tab-pane" aria-selected="false">Web Design</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="android-applications-tab" data-bs-toggle="tab" data-bs-target="#android-applications-tab-pane" type="button" role="tab" aria-controls="android-applications-tab-pane" aria-selected="false">Android Applications</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="service-tab nav-link" id="ios-application-tab" data-bs-toggle="tab" data-bs-target="#ios-application-tab-pane" type="button" role="tab" aria-controls="ios-application-tab-pane" aria-selected="false">IOS Application</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="e-commerce-tab" data-bs-toggle="tab" data-bs-target="#e-commerce-tab-pane" type="button" role="tab" aria-controls="e-commerce-tab-pane" aria-selected="false">E-Commerce</button>
                                </li>
                              </ul>
                              <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="web-application-tab-pane" role="tabpanel" aria-labelledby="web-application-tab" tabindex="0">
                                  <img class="img-fluid service-img" src="images/service-page-images/web-application.jpg" alt="">
                                  <h6>Services</h6>
                                    <h2 class="tab-heading">Web Application</h2>

                                      <p>
                                     
                         content-1
                                      </p>
                                </div>

                                <div class="tab-pane fade" id="web-design-tab-pane" role="tabpanel" aria-labelledby="web-design-tab" tabindex="0">
                                  <img class="img-fluid service-img" src="images/service-page-images/web-design.jpg" alt="">
                                  <h6>Services</h6>
                                    <h2 class="tab-heading">Web Design</h2>

                                      <p>
                                        content-2
                                      </p>
                                     
                                </div>

                                <div class="tab-pane fade" id="android-applications-tab-pane" role="tabpanel" aria-labelledby="android-applications-tab" tabindex="0">
                                  <img class="img-fluid service-img" src="images/service-page-images/android-application.jpg" alt="">
                                  <h6>Services</h6>
                                    <h2 class="tab-heading">Android Applications</h2>

<p>content-3</p>
                                    </div>

                                <div class="tab-pane fade" id="ios-application-tab-pane" role="tabpanel" aria-labelledby="ios-application-tab" tabindex="0">
                                  <img class="img-fluid service-img" src="images/service-page-images/ios-application.jpg" alt="">
                                  <h6>Services</h6>
                                    <h2 class="tab-heading">IOS Application</h2>

                                    content-4
                                </div>
                                <div class="tab-pane fade" id="e-commerce-tab-pane" role="tabpanel" aria-labelledby="e-commerce-tab" tabindex="0">
                                  <img class="img-fluid service-img" src="images/service-page-images/e-commerce.jpg" alt="">
                                  <h6>Services</h6>
                                    <h2 class="tab-heading">E-commerce</h2>

                                     <p>content-5</p>
                                </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-12 tab-col">
                              <div class="product-menu-container">
                                <h4>Our Products</h4>
                                  <ul>
                                    <li><a href="">demo1</a></li>
                                    <li><a href="">demo2</a></li>
                                    <li><a href="">demo3</a></li>

                                  </ul>
                              </div>
                        </div>
                    </div>
                </div>
            
            
          </section>
        </div>
         
    </div>
    
    <script>
     const hash=window.location.hash;
     const bsTab = new bootstrap.Tab(hash);
     bsTab.show();
     </script> 
</body>
</html>

赞(0）回复(0）举报 2023-03-05

ao218c7q5#

如果要从product.html移动到solution.html，请单击，您可以使用href：