-1

希望你们都做得很好..

首先，非常感谢您提供这个很棒的网站.. 它解决了我在搜索时遇到的很多问题..

现在是我现在面临的问题，我无法通过我的努力或在这里和谷歌搜索来获得解决方案。我基本上是 CSS 新手，但我已经学会了基础知识（希望如此）。我有表格导航旁边还有另一个链接列表..请检查图片：http ://www.tiikoni.com/tis/view/?id=90b0b93

我想要的是，当用户进入页面时，左边的列表不应该是可见的..当用户点击红色的“A”（这是红色的，因为它已被激活）时，左边的列表显示出来......然后，当他选择列表中的一个（假设首先），蓝色区域应该显示特定内容（我做对的最后一个动作）..我设法将它隐藏起来，但是当我他的“A”时它没有显示..我使用的代码如下：

记住两件事，页面设计为表格，因此左侧列表位于与蓝色表格导航所在的单元格分开的单元格中。第二，我试图不使用 jQuery 或任何其他脚本以外的其他脚本css..

选项卡.css

    .tabs
{
    position:relative;
    text-align:left; 
...........    
}
.tabs ul.menu
{
    list-style-type:none;
    display:inline; 
.........
}
.tabs ul.menu > li
{
    display:inline;
    float:none; 
  ........   
}
.tabs > ul.menu > li >  a
{
    color: #580000; /* tabs titles */
    text-decoration:none;
    display:inline-block;
........    
}

.tabs ul.menu > li > a:hover
{     
    color: white;   
    cursor:hand;     
}
.tabs ul.menu li > div
{    
    display:none;
    position:absolute;
     .........         
}
/*.tabs ul.menu > li > div > p
{
    border:1px solid #f1f3f4;      
    background-color: #f5f9fc;  
   ........

}  */
.tabs ul.menu > li > a:focus
{  
    color: #f5f9fc;  

}

.tabs ul.menu > li:target > a
{
    cursor:default;
         /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f3f4), to(#8A0808));

.......
}

.tabs ul.menu li:target > div
{
    display:block;
}

我的表.css

.myLeft
{

    text-align:left; /* This is only if you want the tab items at the center */          
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    position:relative;
    display: none;
..........    
}
.myLeft:target
{

    text-align:left; /* This is only if you want the tab items at the center */          
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    position:relative;
    display: block;
    visibility:visible;
........

}
.myLeft > ul.menuLeft
{
    list-style-type:none;
    display:inline; /* Change this to block or inline for non-center alignment */      
    .........
}
.myLeft > ul.menuLeft > li
{
    display:inline;
    float:none; 
........    
}
.myLeft > ul.menuLeft > li >  a
{
    color: #580000; /* #7a7883;  /* tabs titles */
    text-decoration:none;
    display:block;
........
}

.myLeft > ul.menuLeft > li > a:hover
{     
    color: white;   
    cursor:hand;     
}
.myLeft > ul.menuLeft > li > div
{    
    display:none;
    position:absolute;
     ........        
}

.myLeft > ul.menuLeft > li > a:focus
{  
    color: #f5f9fc;  

}

.myLeft > ul.menuLeft > li:target > a
{
    cursor:default;
.........  
}
.myLeft > ul.menuLeft > li:target > div
{
    display:block;
}

表格内容的内容：

 <div class="tabs"  style="height:300px;"> <!-- Tabs --> 
  <ul class="menu">
    <li id="item-1"> <!-- item-1 -->        
      <a href="#left-1"> A </a> 
         <div id="#item-1"> 
               .............

左侧列表内容：

<div id = "#left-1" class="myLeft"  <!-- Tabs --> 
      <ul class="menuLeft">
        <li> <!-- item-1 -->
          <a href="#item-1"> FIRST </a>
        </li>
        <li> <!-- item-1 -->
          <a href=""> Second </a>
        </li>
        <li> <!-- item-1 -->
          <a href=""> Thired </a>
        </li>

对不起，长线程，谢谢你提前..

4

1 回答 1

0

我得到了上述 LONG 问题的答案.. 简单地说，命名左侧列表的整个 iv 而不在其前面使用井号标签.. 不仅是链接.. 如下所示：

<div id = "left-1" class="myLeft"  style="height:300px; "> <!-- Tabs --> 
      <ul class="menuLeft">
                <li> <a class="alLink" href="#item-1">our meetings</a> </li> 
.......

现在我还有另外三个问题：“（首先，当这个左侧列表出现时，页面会移动。第二，我希望上部链接（当你点击它们时打开左侧列表）在左侧链接时突出​​显示显示..这只能通过将它们与左侧链接相同来完成..但在这种情况下它将无法正常工作..我认为这可以通过使用jQuery来解决..第三，当我点击第一个链接时在左侧列表中，中间的蓝色框应该更改，而左侧列表仍然存在......它就消失了！

如果有人有任何建议，请告诉我..

谢谢你..

于 2013-09-11T16:46:30.033 回答