Question

希望你们所有人都做得很好..

首先，非常感谢你们这个伟大的网站..它解决了我在寻找它时面临的许多问题..

现在我正面临的问题是我无法通过我的努力得到解决方案，也无法在这里搜索和谷歌... 我基本上是css的新手，但我已经学会了基本的（希望如此）...我将表格导航与另一个链接列表放在一边..请查看图像：http://www.tiikoni.com/tis/view/?id=90b0b93

我想要的是，当用户进入页面时，左侧列表不应该是可见的..当用户点击红色“A”（因为它被激活而为红色）时，左侧列表显示..然后，当他选择其中一个列表（让我们说第一个）时，蓝色区域应该显示特定内容（我做的最后一个动作）..我设法隐藏它，但它没有显示我何时他的“A” .. 我使用的代码如下：

记住两件事，页面被设计为一个表，所以左边的列表是在一个单元格中与蓝色表格导航的单元格分开的。第二，我试图不使用jQuery或任何其他除了css之外的脚本..

tabs.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;
}

myTable.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>

对不起长线程，谢谢你的高级..

Answer 1

我得到了上述长期问题的答案.. 简单地说，在不使用hash-tag之前命名左侧列表的整个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来解决.. 第三，当我点击左侧列表的第一个链接时，中间的蓝色框应该更改，而此左侧列表仍然存在...它只是消失!!

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

谢谢..

如何从另一个列表中定位div

1 个答案: