Question

我正在为我的项目尝试一个索引页面..我的索引页面左侧有一些链接。如果我点击一个链接，相应的页面将显示在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>

Answer 1

可以在链接的点击上添加，并且必须删除。

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

Answer 2

使用此代码访问链接的css

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

表示当前行在组织页面中添加css

.page1{
color:green;
 }

Answer 3

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

＆＃13;

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

＆＃13;

a.active{
  color: red;
}

＆＃13;

<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>

＆＃13;

Answer 4

您可以使用<li class="parent active">

在<div>标记中。它会将您的选择链接保持为有效状态。

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

4 个答案: