代码之家 › 专栏 › 技术社区 › Anoop

如何用颜色显示所选链接?

colors hyperlink html

Anoop · 技术社区 · 11 年前

我正在尝试我的项目的索引页。。我在索引页面的左侧有一些链接。如果我单击一个链接,相应的页面将显示在一个div中。目前我已经完成了鼠标通过链接时的颜色显示。。

单击链接时,如何才能将链接显示为选中的链接。。

我的一部分代码在这里。。如果你知道…请帮帮我。。。

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="style.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    <script src="js/tooltipsy.min.js"></script>


<style type="text/css">

    .leftpan{
    margin-top: -23px;
    margin-left: 5px;
    alignment-adjust: width:295px;
    float:left;
    background:#004E96;
    height: 960px;
    border-radius: 10px;
    }

    .quickone{
    border-radius:3px;
    border:1px solid #357ec7;
    margin:10px;
    background:#fff;
    }

   a{
   color:#fff;
   text-decoration:none;
   font-family: Arial;
   font-weight: bold;
   font-size: 11px;
   }

   .clearfix {
   display: block;
   } 

   .line{ 
   background: none repeat scroll 0% 0% #004E96;
   height: 4px;
   margin: 10px 4px;
   display: block;
   overflow: hidden;
   width: 100%;
   margin-top: -20px;
   }

   .line1{ 
   background: none repeat scroll 0% 0% #D8A455;
   height: 4px;
   margin: 10px 4px;
   display: block;
   overflow: hidden;
   width: 100%;
   margin-top: -7px;
   }

   .blue_bg, .blue_bg1 {
    background-color: #004E96;
    height: 4px;
    width: 100%;
    float: left;
    margin-left: 5px;
    }

    .divdata{ 
    margin-left: 304px;
    margin-top: -23px;margin-bottom: 3px;
    border-color: rgba(230, 240, 239, 0.34);
    border-style: groove;
    height:960px;

    }



.btn:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 0px 0px 0px;
}

 select{
    margin-left: 6px;

    font-size: 10px;
    height: 22px;

}
    </style>

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

  $( document ).ready(function() {



   $( "#page1" ).click(function() {

            $('#showData').load('1.OrganisationalDetails.html');                      
       });

   $( "#page2" ).click(function() {

            $('#showData').load('2.HumanResource.html');   

       });
   $( "#page3" ).click(function() {

            $('#showData').load('3.Risk.html');                       
       });
   $( "#page4" ).click(function() {


            $('#showData').load('4.Customerprofile.html');                        
       });
   $( "#page5" ).click(function() {

            $('#showData').load('5.BalanceSheet.html');                       
       });
//   $(function() {
//          $(document).tooltip();
//                    });
   });

   </script>
</head>
<body>
<div class="main_wrapper clearfix"> 
<div class="header">

    <h1 style="text-align:right; color:#004E96; text-shadow:yellow;" ></h1>
</div>

<div class="leftpan">
<div id="quickone">


<i class="sep"></i>
<li><label class="f14"><a id="page1" href="#">Organizational Details</a></label></li>
<i class="sep"></i>
<li><label class="f14"><a id="page2" href="#">Human Resource </a></label></li>
<i class="sep"></i>
<li><label class="f14"><a id="page3" href="#">Risk Governance Structure& Business Model</a></label></li>
<i class="sep"></i>
<li><label class="f14"><a id="page4" href="#" >Customer Profile, Service,  Complaints and Frauds</a></label></li>
<i class="sep"></i>
<li><label class="f14"><a id="page5" href="#" >Balance Sheet & Profit and Poss</a></label></li>
i>

</div>
</div>
<!--<div id="showData" style="clear:both;overflow:scroll;" class="divdata"></div>-->

<br>
<br>
</body>
</html>

4 回复 | 直到 11 年前

wolfram77 11 年前

CSS类可以是补充在上面点击链接的,必须是 远离的 与其他人不同。

$('#quickone a').click(function() {
    $('#quickone a').removeClass('selected');
    $(this).addClass('selected');
});

Pugazh 11 年前

将以下内容添加到jQuery和CSS中。

$(document).ready(function(){
  $a = $("#quickone").find('a');
  $a.click(function(){
    $a.removeClass("active");
    $(this).addClass("active");;
  });
});

a.active{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main_wrapper clearfix"> 
<div class="header">

    <h1 style="text-align:right; color:#004E96; text-shadow:yellow;" ></h1>
</div>

<div class="leftpan">
<div id="quickone">


<i class="sep"></i>
<li><label class="f14"><a id="page1" href="#">Organizational Details</a></label></li>
<i class="sep"></i>
<li><label class="f14"><a id="page2" href="#">Human Resource </a></label></li>
<i class="sep"></i>
<li><label class="f14"><a id="page3" href="#">Risk Governance Structure& Business Model</a></label></li>
<i class="sep"></i>
<li><label class="f14"><a id="page4" href="#" >Customer Profile, Service,  Complaints and Frauds</a></label></li>
<i class="sep"></i>
<li><label class="f14"><a id="page5" href="#" >Balance Sheet & Profit and Poss</a></label></li>

</div>
</div>
<!--<div id="showData" style="clear:both;overflow:scroll;" class="divdata"></div>-->

<br>
<br>

user3386779 11 年前

使用此代码访问链接的css

a:visited{
color:red;
}
 a:hover{
   color:black;
 }

对于当前行在组织页面中添加css

.page1{
color:green;
 }

4b0 Agit 8 年前

你可以和 <li class="parent active">

在您的 <div> 标签。它将使您的选择链接保持活动状态。