Question

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

http://jsfiddle.net/kU9uL/

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>

CSS代码：

.header {
  position: relative;
  width: 1265px;
  line-height:68px;
  background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);

  /* styles under are just for fun */
  border-radius: 5px 5px 0 0;
  text-indent: 20px;
  text-transform: uppercase;
  font-family: arial;
  font-weight: bold;
  color: white;
}

/* making backgrounds compatible */  
.header {
  background: rgba(20,82,159,1);
  background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
  background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}

#leftcolumn{
  float: center;
  width: 200px; /*Width of left column*/
  height: 650px;
  margin-top: -16px;
  background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  color: white;
}

#leftcolumn {
  background: rgba(20,82,159,1);
  background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
  background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}

#nav {
  color: white;
}

#nav ul {
  padding-top: 40px;
  padding-left: 15px;
}

#nav ul li { 
  list-style-type: none;
  text-decoration: none;
  font-size: 18px;
  font-family: Verdana;
  margin: 0px 0 40px 0;
}

a:link    {color:white;}
a:visited {color:white;}
a:active  {color:white;}
a:hover   {color:rgb(152,152,152);}


/*.inputBox {
  position: relative;
  width: 500px;
  line-height:400px;
  margin-top: -625px;
  margin-left: 450px;

  background: black;

  /* styles under are just for fun */
/*  border-radius: 5px 5px 0 0;
  text-indent: 20px;
  text-transform: uppercase;
  font-family: arial;
  font-weight: bold;
  color: white;
}*/

Answer 1

删除float: center后，表单会显示在左侧导航栏的右侧： http://jsfiddle.net/z5sYB/

Answer 2

轻松愉快。

 <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');
});

我认为你需要类似的东西 .tab-content {display：none} .tab-content .current {display：block}

从手机发送。对不起，简洁。不要忘记使用jquery库并准备好文档。

表单显示和在同一页面上显示不同链接的问题？

2 个答案: