选项卡功能不起作用，第二个选项卡文本位于底部

Question

我正在尝试制作选项卡以最大化空间，页面本身可以工作，但第二页上的文本位于底部。我假设文本的布局就像第一个选项卡上文本的延续一样。我还没有玩过第三个选项卡，因为它更多的是相同的东西，但这次文本完全在框外，并爆炸了其余烦人的布局。

我尝试过更改文本位置，更改边距，聊天 gpt 无法修复它，我尝试查看另一段代码（由其他人预先编写），但我无法弄清楚他们做了什么我没有做的事情't。我对编码还很陌生，并且由于我正在编码的网站只允许 HTML，因此非常感谢您的帮助...

 <div class="card rounded-0 mx-1 my-auto align-self-stretch" 
      style="height:320px; width:450px; 
            background-image: url(https://i.pinimg.com/564x/a8/80/31/a88031d38378d6a22afa1524bddc4e90.jpg); 
            background-size:cover; 
            background-position:center; 
            background-repeat:no-repeat;
            background-color:#1c1a1b;
            
            color: #1c1a1b; 
            letter-spacing:1px; 
            font-weight: 600;">
 
  
<ul class="nav row no-gutters justify-content-around text-center font-weight-bold text-uppercase" 
    style="letter-spacing: 1px;">
  
    <li class="nav-item col-auto"><a class="nav-link px-1 active" data-toggle="tab" href="#ONE" style="color:#423d40;">
    Info</a></li>

    <li class="nav-item col-auto"><a class="nav-link px-1" data-toggle="tab" href="#TWO" style="color:#423d40;">
    Likes & dislikes</a></li>

    <li class="nav-item col-auto"><a class="nav-link px-1" data-toggle="tab" href="#THREE" style="color:#423d40;">
    meow</a></li>
    
</ul>

          
          
          
          
    <div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
          
         <p style="font-family:courier; text-align:center; font-weight:550; font-size:25px; margin: 0; padding: 0;">  meow  </p>
         
          
         <p style="font-family:courier; text-align:left; font-weight:400; font-size:18px; margin-left:10px;" >  
            
            
             <b> ★ nicknames </b>      meowable
            
            <br> <b> ★ pronouns </b>       meowable
            
            <br> <b> ★ age </b>               meowable
            
            <br> <b> ★ species </b>        meowable
            
            <br> <b> ★ occupation </b>      meowable
            
            <br> <b> ★ playlist </b>       <a href="   " target="_BLANK"> meowable </a>   
        
        </p> 
           
    </div> 
         
         
          
         
    <div class="tab-pane fade" data-toggle="tab" id="TWO">
          
  
  <p style="font-family:courier; text-align:center; font-weight:550; font-size:25px; position: relative; top: 0; left: 0;"> meow </p>
          
          <p style="font-family:courier; text-align:left; font-weight:400; font-size:18px; margin-left:10px;" >  
            
            
             <b> ★ meow </b>      meowable
           
           
         </div> 
         </div> 
    </div>

Answer 1

希望以下内容对您有所帮助：

// Get all the tab links
let tabLinks = document.querySelectorAll('.nav-link');

// Get all the tab panes
let tabPanes = document.querySelectorAll('.tab-pane');

// Initially hide all tab panes
tabPanes.forEach(pane => {
    pane.style.display = 'none';
});

// Show the first tab pane
tabPanes[0].style.display = 'block';

// Add click event listener to each tab link
tabLinks.forEach((link, index) => {
    link.addEventListener('click', function(e) {
        e.preventDefault();

        // Hide all tab panes
        tabPanes.forEach(pane => {
            pane.style.display = 'none';
        });

        // Show the clicked tab pane
        tabPanes[index].style.display = 'block';
    });
});

.card {
    height:320px; 
    width:450px;
    background-image: url(https://i.pinimg.com/564x/a8/80/31/a88031d38378d6a22afa1524bddc4e90.jpg);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-color:#1c1a1b;
    color: #1c1a1b;
    letter-spacing:1px;
    font-weight: 600;
}

.nav {
    letter-spacing: 1px;
}

.nav-link {
    color:#423d40;
}

  <div class="card rounded-0 mx-1 my-auto align-self-stretch">

        <ul class="nav row no-gutters justify-content-around text-center font-weight-bold text-uppercase">

            <li class="nav-item col-auto"><a class="nav-link px-1 active" data-toggle="tab" href="#ONE">
                Info</a></li>

            <li class="nav-item col-auto"><a class="nav-link px-1" data-toggle="tab" href="#TWO">
                Likes & dislikes</a></li>

            <li class="nav-item col-auto"><a class="nav-link px-1" data-toggle="tab" href="#THREE">
                meow</a></li>

        </ul>

        <div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
            <span>Tab 1 content</span>
        </div>

        <div class="tab-pane fade" data-toggle="tab" id="TWO">
            <span>Tab 2 content</span>
        </div>

        <div class="tab-pane fade" data-toggle="tab" id="THREE">
            <span>Tab 3 content</span>
        </div>
    </div>