如何突出标题＆amp;更改所选书签的标题文本

时间：2017-01-21 14:16:13

标签： javascript html css html5 css3

当用户点击内容列表中的一个项目时，我希望页面滚动到该特定部分以及要突出显示的所选项目的标题。在我选择的不同颜色的文本中持续几秒钟，然后在几秒钟后慢慢淡化为原始颜色。我已经查看过互联网的许多方面，但找不到任何类似于我想要的东西。

@charset "utf-8";

/* CSS Document */

body {
  font-family: 'Work Sans', sans-serif;
}

.wrapper h1 {
  font-size: 2.75em;
  line-height: 100%;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  color: #fff;
}

.attributes h1 {
  font-size: 2.75em;
  line-height: 100%;
  margin-left: 10px;
  margin-right: 10px;
  text-align: left;
  color: #fff;
}

.attributes h2 {
  font-size: 1.875em;
  line-height: 100%;
  margin-left: 10px;
  margin-right: 10px;
  text-align: left;
  color: #fff;
}

.attributes h3 {
  font-size: 1.7em;
  line-height: 100%;
  margin-left: 10px;
  margin-right: 10px;
  text-align: left;
  color: #fff;
}

body {
  color: #000;
  background-position: inherit;
  font-family: 'Work Sans', sans-serif;
  line-height: 100%;
  background-repeat: no-repeat;
}

.wrapper {
  width: 90%;
  height: auto;
  margin: 10px auto 10px auto;
  border: 2px solid #000000;
  background-color: #0099cc;
}


/*header {
	height: 180px;
}*/

.attributes {
  margin-bottom: 50px;
  margin-left: 10px;
  margin-right: 10px;
}

.attributes a {
  color: #fff;
  cursor: pointer;
  text-decoration: underline;
  word-wrap: normal;
  word-break: normal;
  white-space: normal;
}

.attributes p {
  font-size: 1.5em;
  line-height: 1.5;
  margin-left: 10px;
  margin-right: 10px;
  color: #fff;
}

.attributes p a {
  color: #fff;
  cursor: pointer;
  text-decoration: underline;
  word-wrap: normal;
  word-break: normal;
  white-space: normal;
}

.contents_list {
  background-color: #fff;
  color: #000;
  display: inline-block;
  padding: 20px;
  font-size: 1.25em;
  line-height: 1.25;
  box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.45);
}

.contents_list h3 {
  font-size: 1.7em;
  line-height: 100%;
  color: #000;
}

.contents_list a {
  font-size: 1.25em;
  line-height: 100%;
  text-decoration: none;
  color: #000;
}

.contents_list ol {
  list-style-type: decimal;
}

.contents_list li {
  margin-bottom: 20px;
}
<body>
  <div class="wrapper">
    <div>
      <h1>Hello World</h1>
    </div>
    <div class="attributes">
      <div class="contents_list">
        <h3>Contents</h3>
        <ol>
          <li><a href="#section_a">Section A</a></li>
          <li><a href="#section_b">Section B</a></li>
          <li><a href="#section_c">Section C</a></li>
        </ol>
      </div>
      <br/>
      <br/>
      <hr/>
      <a name="section_a" style="text-decoration: none;">
        <h2>Section A</h2>
      </a>
      <p>
        <a><span>Link</span></a></p>
      <hr/>
      <a name="section_b" style="text-decoration: none;">
        <h2>Section B</h2>
      </a>
      <p>
        <a><span>Link</span></a>
      </p>
      <hr/>
      <a name="section_c" style="text-decoration: none;">
        <h2>Section C</h2>
      </a>
      <p>
        <a><span>Link</span></a>
      </p>
    </div>
  </div>
</body>

1 个答案:

答案 0 :(得分：1)

您可以使用:target伪选择器，例如：

@keyframes targeth2 {
  50% {
      background:black;
  }
}
a:target  h2 {
  animation: targeth2 3s ;
}

＆＃13;
＆＃13; 
@charset "utf-8";

/* CSS Document */

body {
  font-family: 'Work Sans', sans-serif;
}
.wrapper h1 {
  font-size: 2.75em;
  line-height: 100%;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  color: #fff;
}
.attributes h1 {
  font-size: 2.75em;
  line-height: 100%;
  margin-left: 10px;
  margin-right: 10px;
  text-align: left;
  color: #fff;
}
.attributes h2 {
  font-size: 1.875em;
  line-height: 100%;
  margin-left: 10px;
  margin-right: 10px;
  text-align: left;
  color: #fff;
}
.attributes h3 {
  font-size: 1.7em;
  line-height: 100%;
  margin-left: 10px;
  margin-right: 10px;
  text-align: left;
  color: #fff;
}
body {
  color: #000;
  background-position: inherit;
  font-family: 'Work Sans', sans-serif;
  line-height: 100%;
  background-repeat: no-repeat;
}
.wrapper {
  width: 90%;
  height: auto;
  margin: 10px auto 10px auto;
  border: 2px solid #000000;
  background-color: #0099cc;
}
/*header {
	height: 180px;
}*/

.attributes {
  margin-bottom: 50px;
  margin-left: 10px;
  margin-right: 10px;
}
.attributes a {
  color: #fff;
  cursor: pointer;
  text-decoration: underline;
  word-wrap: normal;
  word-break: normal;
  white-space: normal;
}
.attributes p {
  font-size: 1.5em;
  line-height: 1.5;
  margin-left: 10px;
  margin-right: 10px;
  color: #fff;
}
.attributes p a {
  color: #fff;
  cursor: pointer;
  text-decoration: underline;
  word-wrap: normal;
  word-break: normal;
  white-space: normal;
}
.contents_list {
  background-color: #fff;
  color: #000;
  display: inline-block;
  padding: 20px;
  font-size: 1.25em;
  line-height: 1.25;
  box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.45);
}
.contents_list h3 {
  font-size: 1.7em;
  line-height: 100%;
  color: #000;
}
.contents_list a {
  font-size: 1.25em;
  line-height: 100%;
  text-decoration: none;
  color: #000;
}
.contents_list ol {
  list-style-type: decimal;
}
.contents_list li {
  margin-bottom: 20px;
}
/*
a:target h2 {
  background: black;
  color: white;
}*/


@keyframes targeth2 {
  50% {
      background:black;
  }
}
a:target  h2 {
  animation: targeth2 3s ;
}
＆＃13; 
<body>
  <div class="wrapper">
    <div>
      <h1>Hello World</h1>
    </div>
    <div class="attributes">
      <div class="contents_list">
        <h3>Contents</h3>
        <ol>
          <li><a href="#section_a">Section A</a>
          </li>
          <li><a href="#section_b">Section B</a>
          </li>
          <li><a href="#section_c">Section C</a>
          </li>
        </ol>
      </div>
      <br/>
      <br/>
      <hr/>
      <a name="section_a" style="text-decoration: none;">
        <h2>Section A</h2>
      </a>
      <p>
        <a><span>Link</span></a>
      </p>
      <hr/>
      <a name="section_b" style="text-decoration: none;">
        <h2>Section B</h2>
      </a>
      <p>
        <a><span>Link</span></a>
      </p>
      <hr/>
      <a name="section_c" style="text-decoration: none;">
        <h2>Section C</h2>
      </a>
      <p>
        <a><span>Link</span></a>
      </p>
    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题