Html 在同一页面上显示表单和创建不同链接时出现问题？_Html_Css

Html 在同一页面上显示表单和创建不同链接时出现问题？

html css

Html 在同一页面上显示表单和创建不同链接时出现问题？,html,css,Html,Css,您好，我有几个问题，我无法解决后，研究。一个问题是为什么我的表单没有显示。我已经在这一页的下面链接了一个JSFIDLE演示。主要问题在左边，当你看到演示时，我有四个不同的链接。我希望每个链接都显示一个不同的表单，或者在左侧导航菜单右侧和标题下方的空白区域内说出我想要的任何内容。我似乎找不到可能做到这一点的方法。如果有人能帮忙，我将不胜感激 HTML代码： <html> <head> <title>Our Cool Banking App</ti

您好，我有几个问题，我无法解决后，研究。一个问题是为什么我的表单没有显示。我已经在这一页的下面链接了一个JSFIDLE演示。主要问题在左边，当你看到演示时，我有四个不同的链接。我希望每个链接都显示一个不同的表单，或者在左侧导航菜单右侧和标题下方的空白区域内说出我想要的任何内容。我似乎找不到可能做到这一点的方法。如果有人能帮忙，我将不胜感激

HTML代码：

<html>

<head>

  <title>Our Cool Banking App</title>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>


<body>

  <div class="header">Our Really Cool Banking App</div>

  <div id="leftcolumn"> 
      <!-- Creating Buttons here -->
      <div id="nav">
        <ul>
          <li><a href="#checking">Checking</a></li>
          <li><a href="#savings">Savings</a></li>
          <li><a href="#createaccount">Create Account</a></li>
          <li><a href="#createloan">Create Loan</a></li>
        </ul>
      </div>
  </div>

  <!-- <div class="inputBox">Test</box> -->

  <form>
    <input type="text" name="Username"><br>
    <input type="number" name="Amount"><br>
    <input type="radio" name="accounttype" value="Checking"><br>
    <input type="radio" name="accounttype" value="Savings"><br>
    <input type="radio" name="bankaction" value="Deposit"><br>
    <input type="radio" name="bankaction" value="Withdraw"><br>
  </form>


</body>

</html>

删除

浮动：居中后，表单将显示在左侧导航的右侧：
轻松的微风
 <nav class="tabs">
        <ul class="tabs">
            <li class="tab-link current" data-tab="tab-1">tab 1</li>
            <li class="tab-link " data-tab="tab-2">tab 2</li>
        </ul>
    </nav>
    <div id="tab-1" class="tab-content current">
        tab 1 content
    </div>
    <div id="tab-2" class="tab-content">
       tab 2 content
    </div>


$('ul.tabs li').click(function () {
    var tabId = $(this).attr('data-tab');
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tabId).addClass('current');
});



表1
表2

表1内容
表2内容
$（'ul.tabs li'）。单击（函数（）{
var tabId=$（this.attr（'data-tab'）；
$（'ul.tabs li'）.removeClass（'current'）；
$（'.tab content'）.removeClass（'current'）；
$（this.addClass（'current'）；
$（“#”+tabId）.addClass（'current'）；
});

我想你需要这样的东西
.tab内容{显示：无}
.tab内容。当前{显示：块}
通过电话发送。抱歉说得太简短了。别忘了使用jquery库并准备好文档。
float:center不存在…@tilix谢谢！这就解决了第一个问题：李的阶级是什么？我对那件事一无所知。根据我在中的理解，我们可以添加任何我们想要的内容，它将填充到左侧导航的右侧和标题下？更新为包含CSS。
 <nav class="tabs">
        <ul class="tabs">
            <li class="tab-link current" data-tab="tab-1">tab 1</li>
            <li class="tab-link " data-tab="tab-2">tab 2</li>
        </ul>
    </nav>
    <div id="tab-1" class="tab-content current">
        tab 1 content
    </div>
    <div id="tab-2" class="tab-content">
       tab 2 content
    </div>


$('ul.tabs li').click(function () {
    var tabId = $(this).attr('data-tab');
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tabId).addClass('current');
});