Question

我正在学习HTML，需要创建一个像上面那样的词汇表。要求是：
- 字母必须始终显示在顶部 - 当我们点击某个字母时，该字母不得再加下划线，当我们点击另一个字母时，最近点击的字母再次加下划线，新点击的字母不再加下划线。

我计划将窗口拆分为2个div：
- 图片的 divright - divleft 由2个较小的div组成：字母 leftbottom lefttop em> 为内容
但我仍然不满足要求：字母表部分总是被移动，我尝试了stackoverflow中提到的很多方法，以便在点击后删除下划线，但它仍然不起作用。请用代码给我一个提示甚至更好的提示！非常感谢！ :)

这是我的代码：

.divright { position:fixed; margin: 0px; float: right; width: 200px; height: 100%; top: 0em; right: 0em; border: 1px solid green; } .divleft { margin-right: 200px; overflow: hidden; border: 1px solid blue; } .leftop { border: 1px solid; height: 70px; } /*center a div in another div */ #innertop { margin-left: 10px; width:415px; margin: 0 auto; border: 1px solid; } .leftbottom { border: 1px solid; } #innerbottom { padding-left: 10px; width:415px; margin: 0 auto; border: 1px solid } header { font-size: 20pt; } body { margin:0px; } a:link { text-decoration: underlined; } a:visited { text-decoration: none !important; }

<div id="parent"> <div class="divright"> <img src="http://www.vectorsland.com/imgd/l52363-free-spring-background-76076.jpg" style='width:200px;height:100%'/> </div> <div class="divleft"> <div class="lefttop"> <div id="innertop"> <header><b>Glossary</b></header><br> <span style='font-size:15pt'><b> <a href="#a">A</a>   <a href="#b">B</a>   C  D   <a href="#y">Y</a>   <a href="#z">Z</a></b></span> </div> </div> <div class="leftbottom"> <div id="innerbottom"> <p><a name="a"><b>A</b><br> <b>Alorem ipsum</b><br> Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br> <b>Alorem ipsum</b><br> Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto sit, ut et res adiatem sequasit quia quia peria solest<br> </a></p> <br> <p><a name="b"><b>B</b><br> <b>Blorem ipsum</b><br> Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br> <b>Blorem ipsum</b><br> Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br> </a></p> <br> <p><a name="y"><b>Y</b><br> <b>Ylorem ipsum</b><br> Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br> <b>Ylorem ipsum</b><br> Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto sit, ut et res adiatem sequasit quia quia peria solest<br> </a></p> <br> <p><a name="z"><b>Z</b><br> <b>Zlorem ipsum</b><br> Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br> <b>Zlorem ipsum</b><br> Edios as id eium denectem doluptaquam qui sit, ut et res adiatem sequasit quia quia peria solesto<br> </a> </p> </div> </div> </div> </div>

Answer 1

要修改单击锚点的下划线，使用jQuery很容易
如果您尚未使用它，请在<head>和</head>之间添加：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

为每个字母添加一个类，如下所示：

<a href="#a" class="glossar">A</a>&nbsp;&nbsp;
<a href="#b" class="glossar">B</a>&nbsp;&nbsp;

然后将此脚本放在</body>之前：

<script>
$("a.glossar").click(function(){
        $("a.glossar").css({"text-decoration":"underline"});    // <-- Set all the anchors to be underlined.
        $(this).css({"text-decoration":"none"});    // <-- Sets the clicked anchor to NOT be underlined.
});
</script>

的 -----
编辑回答@learner问题。 （见评论）

«在哪里放置»你的剧本：

这取决于您何时希望在页面呈现时执行脚本所以我无法告诉你始终放置它的位置
对于此脚本，页面必须在执行glossar函数之前呈现所有.click()标记，在页面加载时仅执行一次。

它将内部函数归于所有glossar标记这是内部函数，可以在onclick事件中对下划线产生预期效果有关页面中脚本定位的更多详细信息，请参阅this answer

«点击字母时出现的词汇表出现问题»

我在your Fiddle中没有看到任何问题如果你认为最后一个字母的描述，比如字母Z，没有在窗口顶部对齐是一个问题：

这不是脚本问题，而是正常的HTML行为您的页面不久就应该发布！

只需在页面末尾添加几行返回即可解决此问题。

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

OR ，这是一个更清洁的解决方案：

而不是页面末尾的多个<br>，您可以像这样设置body样式定义：

body{
    margin: 0 0 2000px 0;    /* 2000px is taller than most big screens, should be enought. ;)  */
}

保证金值按此顺序排列：top right bottom left。

的 -----
第二次编辑 （见评论）
之前的编辑仍然是正确的。这是一个补充。

好的我明白了。你想要一个fixed顶级词汇表索引你的问题中并不清楚这一点
将这7个新行添加到您的样式定义中：

.lefttop {              /* <-- added a "t" here... Was missing */
    border: 1px solid;
    height: 70px;
    position: fixed;    /* Fixes this div position */
    z-index: 1;         /* Attributes a "layer" index */
    top: 0;             /* Place it at 0px from top of the window */
    left: 0;            /* Place it at 0px from left of the window */
    width: 100%;        /* Take 100% width inside it's parent div */

}
.leftbottom {
    border: 1px solid;
    z-index: 0;         /* Attributes a "layer" index */
    margin-top: 70px;   /* sets a top margin, so the A definition will not always be "under" the glossary index */
}

更高的指数“在顶部”。

然后，根据我在下面提出的更新后的脚本，您不需要在定义上添加a标记。
但你还需要一个参考来达到目的将其作为p放在id元素上。

更改所有“字母”行：

<p><a name="a"><b>A</b><br>

为：

<p id="a"><b>A</b><br>

以下是更新的脚本，现在包含scrollTop操作。

$("a.glossar").click(function(e){
    // Make definition scroll to top.
    e.preventDefault();                     // Prevents from doing the normal behavior of an anchor click event
    target=$(this).attr("href");        // Grabs the href attribute of the clicked anchor
    targetOffset=$(target).offset().top;    // Finds the position of the target in the page
    $("body").scrollTop( targetOffset-70 );      // Scrolls the BODY to the targets offset minus 70px from the top ( 70px is your defined glossary height )

    // Underlining effect on glossary links
    $("a.glossar").css({"text-decoration":"underline"});    // <-- Sets all the anchors to be underlined.
    $(this).css({"text-decoration":"none"});    // <-- Sets the clicked anchor to NOT be underlined.
});

HTML中的浮动字母表

1 个答案: