如何使用顏色顯示選定的鏈接？

我正在嘗試我的項目的索引頁..我有一些鏈接在我的索引頁左側。如果我點擊一個鏈接相應的頁面將顯示在一個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>

來源

2015-04-02 Anoop

[Rü提到當前的鏈接所選擇的鏈接 – user3386779 2015-04-02 06:33:01

如果鏈接是在'a''標籤然後'a：link {color：#FFFFFF}，a：active {color：＃383838}，a：visited {color：#FFFFFF}，a：hover {color：＃383838}' – CodingDefined 2015-04-02 06:34:38

將以下內容添加到您的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>

來源

2015-04-02 06:45:35 Pugazh

感謝它的工作 – Anoop 2015-04-02 07:01:26

使用此代碼訪問鏈接的css

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

對於當前行在組織頁面添加CSS

.page1{ 
color:green; 
}

來源

2015-04-02 06:36:42 user3386779

一個CSS類可以添加在鏈接的點擊，且必須從其餘部分移除。

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

來源

2015-04-02 06:39:05 wolfram77

Anoop U可以與

在tag.It

去將讓您選擇鏈接爲活動

來源

2015-04-02 06:47:41 Dhivya

如何使用顏色顯示選定的鏈接？

回答

相關問題