Question

我有一个类似以下布局的网页;

Layout

HTML是;

<div class="header" style="text-align: center">Demo</div>
<div class="navi">
    <div class="title">
        Options
    </div>
</div>
<div class="content">
    <div class="da">
        <a href="#diva" class="current">diva</a>
        <a href="#divb">divb</a>
        <a href="#divc">divc</a>
        <a href="#divd">divd</a>
    </div>
    <div class="db">
        <div style="width: 300px; height: 300px; background-color: #996633"><a id="diva" name="diva">DIV1</a></div>
        <div style="width: 300px; height: 300px; background-color: #CC0066"><a id="divb" name="divb">DIV2</a></div>
        <div style="width: 300px; height: 300px; background-color: #3300FF"><a id="divc" name="divc">DIV3</a></div>
        <div style="width: 300px; height: 300px; background-color: #99CC00"><a id="divd" name="divd">DIV4</a></div>
    </div>
</div>
<div class="footer">&nbsp;</div>

和CSS是;

html, body, div, h2, img, ul, li, form, time {
  margin: 0;
  padding: 0;
  border: 0;
}
html, body {
  position: absolute;
  height: 100%;
  width: 100%;
  min-width: 800px;
}
.header{
  height: 40px;
  color: #FFF;
  background-color: #666666;
}
.title{
  display: block;
  float: left;
  margin-top: 4px;
  margin-left: 10px;
}
.content{
  margin-bottom: 36px;
}
.footer{
  height: 30px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: solid 1px #CCCCCC;
  background: #FFFFFF;
}

.da,.db{
  position: absolute;
  z-index: 0;
  top: 82px;
  bottom: 30px;
}
.da{
  width: 200px;
  border-right: solid 1px #CCCCCC;
  overflow: visible !important;
}
.da a{
  font-family: Tahoma;
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #555;
}
.da a:hover{
  background-color: #DDD;
}
.da .current,.da .current:hover{
  background-color: #FF6600;
}
.db{
  left: 200px;
  right: 0;
  background-color: #CC99FF;
  overflow: scroll;
  overflow-x:hidden;
}

侧边栏的链接固定在4个级联div上。它们与div链接，当我点击链接时，相应的div将向上滚动。这很好。但我试图实现不同的东西。当前可见div的链接可以是橙色背景颜色，因此当用户滚动页面时，橙色将根据页面上的当前div从一个链接转移到另一个链接。经过一些谷歌搜索和研究后，我发现这个问题很有用 jQuery changing css on navigation when div # scrolls into view 。此 fiddle 中提供了该解决方案的演示，这正是我想要的。

但是当我尝试在我的布局中实现此解决方案时，它无法正常工作，即链接不会突出显示到相应的div。

Here 是我的小提琴。

如何在布局中实现相同的功能？

Answer 1

试试这个：

<强> CSS：

.da,.db{
  position: relative; // changed to relative. Because of absolute your document height is affected.
  z-index: 0;
  top: 82px;
  bottom: 30px;
}

.db{
  left: 142px;
    top:42px;
  right: 0;
  background-color: #CC99FF;
  overflow: scroll;
  overflow-x:hidden;
}

<强> jQuery的：

$('.da a').removeClass('current').eq(i).addClass('current'); // replaced selected with current which you are using.

<强> DEMO

Answer 2

我无法解决其中一些问题，但我发现这个问题非常简单。

基本上说鼠标会在屏幕的某个位置显示，如果它位于特定的div中，请突出显示匹配的链接。

<强> HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="nav">
    <span id ="menu">&#9776;</span> 
    <ul id="top-menu">
        <li><a href="#one" class="links">Menu 1</a></li>
        <li><a href="#two" class="links">Menu 2</a></li>
        <li><a href="#three" class="links">Menu 3</a></li>
        <li><a href="#four" class="links">Menu 4</a></li>
        <li><a href="#five" class="links">Menu 5</a></li>
        <li><a href="#six" class="links">Menu 6</a></li>
    </ul>
</div>
<div id="wrapper">
    <div id="one" class="container">
        one
    </div>
    <div id="two" class="container">
        two
    </div>
    <div id="three" class="container">
        three
    </div>
    <div id="four" class="container">
        four
    </div>
    <div id="five" class="container">
        five
    </div>
    <div id="six" class="container">
        six
    </div>
</div>

<强> CSS

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

body{
    font-family: Geneva, Tahoma, Verdana, sans-serif;
    margin: 0px;
}

.nav{
    width: 100%;
    height: 50px;
    background: rgba(200,200,200,0.2);
    position: fixed;
    top: 0px;
}

#menu{
    float: right;
    font-size: 40px;
    font-weight: normal;
    padding-right: 20px;
    color: rgba(100,100,100,0.9);;
}

.nav ul{
    width: 150px;
    list-style-type: none;
    background: rgba(200,200,200,0.2);
    border-radius: 5px;
}

#top-menu{
   clear: both;
   display: block;
   float: right;
   padding-left: 0px;
   margin-top: 10px;
   margin-right: 20px;

}
.links{
    color: black;
    font-size: 20px;
    font-weight: normal;
}

.nav ul li a{
    text-decoration: none;
    text-align: center;
    display: block;
    padding: 2px 0px 2px 10px;
}
.nav ul li a:hover{
    color: #fff;
    background-color: black;
    border-left: thick solid red;
}

#wrapper{
    margin-top: 50px;
}

.container{
    width: 800px;
    height: 600px;
    margin: 0px auto;
    background: rgba(200,200,200,0.2);
    border-bottom: 1px solid rgba(200,200,200,1);
    padding: 20px;
}

.active{
    color: white;
    background-color: rgba(100,100,100,1);
    border-left: thick solid rgba(0,255,0,0.5);
}

<强>的jQuery

$(document).ready(function(){

   $("div").mouseenter(function(){
     var id = $(this).attr('id');
     $('a').removeClass('active');
     $("[href=#"+id+"]").addClass('active');
   });

});

Source

如何在jQuery中查看目标div时突出显示锚链接？

2 个答案: