CSS giữ cho liên kết hoạt động được tô sáng

Question

tôi đã tự hỏi liệu có cách nào để làm điều này với css để người dùng biết họ đang ở trang nào không. tôi đã thử làm điều đó trong html với bộ chọn lớp và kiểu nội tuyến, nhưng nó không hoạt động

ví dụ: trên thanh điều hướng của tôi, tôi có ba trang. 'giới thiệu', 'liên hệ' và 'danh mục đầu tư'. màu văn bản là màu đen theo mặc định, nhưng thay đổi thành màu hồng khi bạn di chuột qua chúng. tôi muốn màu hồng ở lại khi bạn ở trên trang đó. vì vậy 'liên hệ' sẽ có màu hồng sau khi bạn nhấp vào trang. tuy nhiên, màu sắc của liên kết văn bản dường như không thay đổi. bất kỳ ý tưởng? . )



	<div id="navigation">
		<ul>
			<li><a href="about***">about</a></li>
			<li><a href="portfolio***">portfolio</a></li
			<li><a href="contact***">contact</a></li>
		</ul>
	</div><!--end of navigation div-->
	<div id="bodycontent">
	<div id="contactheader">
	<h2>CONTACT</h2>
	</div>
	<div id="contact">
	<img src="imagescontact.png">
	</div>
	<ul id="contact">
		<li class="blackfont">WANT</li>
		<li class="pinkfont">PURE?</li>
	</ul
	<p class="pinkfont">CONTACT9999PURCOM</p>

	  </body>
      </div>

	 </html>

/*
CSS for Will Portfolio site
*/

html {
margin:-10px;
padding: 0px;
height: 1000px;
width: 850px;
margin-left: auto;
margin-right: auto;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin-left: auto;
margin-right: auto;
text-align: left;
}
a {
  font-weight: light;
  color: black;
  text-decoration: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #ec008c;
}

a: active {
  text-decoration: none;
  color: #ec008c;
}

li {
list-style-type: none;
}
#bodycontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 25px;
font-weight:normal;
width: 1000px;
clear: left;
padding-top: 34px;
}
div#navigation {
height: 30px;
width: 400px;
margin: 0 0 0 105;
padding: 75px 0 0 20px;
float: right;
}
div#navigation li{
display: inline;
float: right;
margin: 0 5px 0 25px;
width: 75px
text-align; left;
}
div#header img{
float:left;
width: 300px;
display: block;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight:bold;
padding: 18px;
}
div#container {
margin: 0px auto;
width: 1000px;
}
div#links li{
margin: 0 0 0 -23px;
}
a img {
border-style: none;
display: block;
}
div#contactheader {
float:left;
}
div#contact {
padding: 30px 0 0 210px;
}
.blackfont {
font-size: 18px;
font-weight:bold;
}
.pinkfont {
font-size: 18px;
font-weight:bold;
color: #ec008c;
}
.pink {
color: #ec008c;
}

thuốc chôn

Chào,

tôi đã tự hỏi liệu có cách nào để làm điều này với css để người dùng biết họ đang ở trang nào không. tôi đã thử làm điều đó trong html với bộ chọn lớp và kiểu nội tuyến, nhưng nó không hoạt động

ví dụ: trên thanh điều hướng của tôi, tôi có ba trang. 'giới thiệu', 'liên hệ' và 'danh mục đầu tư'. màu văn bản là màu đen theo mặc định, nhưng thay đổi thành màu hồng khi bạn di chuột qua chúng. tôi muốn màu hồng ở lại khi bạn ở trên trang đó. vì vậy 'liên hệ' sẽ có màu hồng sau khi bạn nhấp vào trang. tuy nhiên, màu sắc của liên kết văn bản dường như không thay đổi. bất kỳ ý tưởng? . )



	<div id="navigation">
		<ul>
			<li><a href="about***">about</a></li>
			<li><a href="portfolio***">portfolio</a></li
			<li><a href="contact***">contact</a></li>
		</ul>
	</div><!--end of navigation div-->
	<div id="bodycontent">
	<div id="contactheader">
	<h2>CONTACT</h2>
	</div>
	<div id="contact">
	<img src="imagescontact.png">
	</div>
	<ul id="contact">
		<li class="blackfont">WANT</li>
		<li class="pinkfont">PURE?</li>
	</ul
	<p class="pinkfont">CONTACT9999PURCOM</p>

	  </body>
      </div>

	 </html>

/*
CSS for Will Portfolio site
*/

html {
margin:-10px;
padding: 0px;
height: 1000px;
width: 850px;
margin-left: auto;
margin-right: auto;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin-left: auto;
margin-right: auto;
text-align: left;
}
a {
  font-weight: light;
  color: black;
  text-decoration: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #ec008c;
}

a: active {
  text-decoration: none;
  color: #ec008c;
}

li {
list-style-type: none;
}
#bodycontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 25px;
font-weight:normal;
width: 1000px;
clear: left;
padding-top: 34px;
}
div#navigation {
height: 30px;
width: 400px;
margin: 0 0 0 105;
padding: 75px 0 0 20px;
float: right;
}
div#navigation li{
display: inline;
float: right;
margin: 0 5px 0 25px;
width: 75px
text-align; left;
}
div#header img{
float:left;
width: 300px;
display: block;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight:bold;
padding: 18px;
}
div#container {
margin: 0px auto;
width: 1000px;
}
div#links li{
margin: 0 0 0 -23px;
}
a img {
border-style: none;
display: block;
}
div#contactheader {
float:left;
}
div#contact {
padding: 30px 0 0 210px;
}
.blackfont {
font-size: 18px;
font-weight:bold;
}
.pinkfont {
font-size: 18px;
font-weight:bold;
color: #ec008c;
}
.pink {
color: #ec008c;
}

sửa lỗi cho tôi nếu tôi sai nhưng tôi không nghĩ điều này có thể được thực hiện với css và html. Nó sẽ yêu cầu một ngôn ngữ khác (như php). Sử dụng php, bạn có thể kiểm tra xem người dùng đã yêu cầu trang nào và nếu liên kết nằm trong điều hướng, hãy áp dụng một kiểu/lớp/id bổ sung cho nó

Đây là một liên kết tôi tìm thấy trực tuyến. astapart

WebMáy

Tôi không chắc liệu đây có phải là thứ bạn đang tìm kiếm hay không, nhưng những gì tôi làm là trong danh sách điều hướng gắn nhãn liên kết của trang đang hoạt động với id=“current”, và sau đó trong css của tôi, . Nó hoạt động tốt cho tôi. #current to make the link or tab or button for the current page have the look that I want. It works well for me.

Cảm ơn tất cả các bạn đã trả lời. tôi đã thử làm theo cách này...tôi không tạo ra một trang web điên rồ với nhiều trang, mặc dù nếu ai đó dành thời gian chỉ cho tôi cách triển khai php vào mã của tôi, tôi cũng sẽ đánh giá cao điều đó

tuy nhiên, tôi chỉ thử làm theo cách đơn giản và nó vẫn không hoạt động. tôi cảm thấy như mình đang làm sai với bộ chọn lớp của mình


/*
CSS for Tim Portfolio site
*/


body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
a {
  font-weight: bold;
  color: black;
  text-decoration: none;
}

a:link {
  color: black;
  text-decoration: none;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #962f34;
}

a: active {
  color: aqua;
  background-color: navy;
}

li {
list-style-type: none;
}
#bodycontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight:normal;
width: 200px;
clear: left;
padding-top: 34px;
}
div#navigation {
height: 30px;
width: 100&#37;;
margin: 0 0 0 105px;
padding: 0 0 0 20px;
font-size: 20px;
line-height: 23px;
0;}
div#navigation ul{
white-space: nowrap;
margin: 5px 0 0 0;
}
div#navigation li{
margin: 5px 0 0 0;
clear: right;
}
div#header img{
float:left;
width:300px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight:bold;
}
div#contact {
clear: both;
width: 500px;
font-size: 20px;
margin: 120px 0 0 50px;
}
div#aboutcontent{
clear: both;
width: 500px;
font-size: 20px;
margin: 120px 0 0 50px;
}
.current {
font-color: #962f34;
color: #962f34;
}
a.current:link {
color: #962f34;
}

	<head>
	  <title>about me</title>
	  <meta http-equiv="Content-Type"
	  	content="text/html; charset=utf-8"/>
	  	<link href="style1.css" rel="stylesheet" type="text/css" />
	 </head>

	<body>
	<div id="header">
		<img src="image****">
		</div>
		<div id="navigation">
			<ul>
				<li><a href="index****">Home</a></li>
				<li class="current"><a href="contact****">Contact</a></li>
				<li><a href="about***">About</a></li>
				<li><a href="resume***">Resumepdf</a></li>
			</ul>
	</div><!--end of navigation div-->
	<div id="contact">
	     <p>You can reach me by phone or email me.
		</p>
	      </div>
	  </body>


	 </html>

Điều duy nhất bạn thực sự làm sai là gán nó cho li thay vì liên kết. Điều đó không nhất thiết quan trọng nhưng tôi cũng đã sử dụng id thay vì lớp trong ví dụ vì có thể bạn chỉ sử dụng nó một lần nên điều đó không thành vấn đề. Dù sao đây là mã làm việc



	<head>
	  <title>about me</title>
	  <meta http-equiv="Content-Type"
	  	content="text/html; charset=utf-8"/>
		<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
a {
  font-weight: bold;
  color: black;
  text-decoration: none;
}

a:link {
  color: black;
  text-decoration: none;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #962f34;
}

a: active {
  color: aqua;
  background-color: navy;
}

li {
list-style-type: none;
}
#bodycontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight:normal;
width: 200px;
clear: left;
padding-top: 34px;
}
div#navigation {
height: 30px;
width: 100%;
margin: 0 0 0 105px;
padding: 0 0 0 20px;
font-size: 20px;
line-height: 23px;
0;}
div#navigation ul{
white-space: nowrap;
margin: 5px 0 0 0;
}
div#navigation li{
margin: 5px 0 0 0;
clear: right;
}
div#header img{
float:left;
width:300px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight:bold;
}
div#contact {
clear: both;
width: 500px;
font-size: 20px;
margin: 120px 0 0 50px;
}
div#aboutcontent{
clear: both;
width: 500px;
font-size: 20px;
margin: 120px 0 0 50px;
}
#current {
color: #962f34;
}
</style>
	 </head>

	<body>
	<div id="header">
		<img src="image****">
		</div>
		<div id="navigation">
			<ul>
				<li><a href="index****">Home</a></li>
				<li><a href="contact****" id="current">Contact</a></li>
				<li><a href="about***">About</a></li>
				<li><a href="resume***">Resumepdf</a></li>
			</ul>
	</div><!--end of navigation div-->
	<div id="contact">
	     <p>You can reach me by phone or email me.
		</p>
	      </

thuốc chôn

…
tôi tự hỏi liệu có cách nào để làm điều này với css để người dùng biết họ đang ở trang nào không. tôi đã thử làm điều đó trong html với bộ chọn lớp và kiểu nội tuyến, nhưng nó không hoạt động.
…

Trong bài đăng sau của bạn, bạn đang đi đúng hướng.

Bạn thêm một lớp vào mục danh sách trang hiện tại và bằng cách đó, bạn có thể tạo kiểu cho cả li và liên kết nếu muốn

#navigation .current a {
	color: #962f34;
}

<li class="current"><a href="contact.html">Contact</a></li>

Một cách khác dễ bảo trì hơn nếu trang web của bạn phát triển, đó là thêm một id (hoặc lớp) vào thẻ body và tạo kiểu cho liên kết trang hiện tại bằng cách sử dụng cách đó theo cách tương tự. Bằng cách này, bạn có thể có chính xác cùng một danh sách điều hướng trên tất cả các trang và sau này bạn có thể tạo kiểu cho bất kỳ thứ gì bạn muốn khác trong các trang đó. Tôi id tất cả các trang nội dung (hoặc vùng chứa chính) trong các trang web của tôi

programming css