Question

我知道这已被再次提出，但我似乎面临挑战。我希望点击或活动链接变为紫色，以便可以判断哪个链接处于活动状态。我尝试了几种方法但没有成功。请问，任何人？

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:baselineAligned="false">

.nav-container {
    float: center;
    width: 100%;
    padding-bottom: 0;
    margin-bottom: 11px; 
}

.navigation-menu {
    padding:  0;
    float: center;
    clear: both;
    font-size: 12px
    margin-bottom: 0;
}

.navigation-menu > li {
    margin-right: 3px;
    margin: 100px auto;
    line-height:20px;
    max-width:860px;
    display: inline;
}

.navigation-menu li {
    list-style-type: none;
}

.navigation-menu li a {
    background-color: #ffffff;
    display:inline-block;
    padding: 10px 20px;
    color: #696969;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

.navigation-menu li.active a {
    background-color: purple;
    color:#fff;
}

.navigation-menu li ul {
    display: none;
}

.navigation-menu ul li a{
    padding:10px 20px;
}

#main {
    clear: left;
}

.navigation-menu li:hover ul {
    display: inline-block;
    position: absolute;  
    padding:5px;
}

.navigation-menu li ul li a:hover{
    background-color: black;
    color: white;
    display: block;
}

.navigation-menu li a:hover{
    background-color:black;
    color: white;
}

Answer 1

添加此脚本

   <script>
    $(document).ready(function(){
      $('ul li a').click(function(){
        $('li a').removeClass("active");
        $(this).addClass("active");
    });
    });
    </script>

添加样式

.navigation-menu li a.active {
      background-color: purple;
      color:#fff;
      }

请参阅链接https://jsfiddle.net/bhavyashah/rv6adud7/3/

Answer 2

您必须检查页面网址并匹配元素中的href，并将class active添加到相应的元素

如果每次打开新页面，您都可以使用以下脚本和jQuery Lib 否则你可以使用上面的代码@Bhavya shah

将test.html page2.html替换为您拥有的页面名称

$(document).ready(function() {
    var pageURL = $(location).attr('href'),
        pageName= [ /test.html/, /page2.html/, /page3.html/],
        links = $('a'),
        LinksToActive;

    for( var i=0; i < $(pageName).size(); i++){
            for( var j=0; j < $(links).size(); j++){
                var str = $(links[j]).attr('href');
                if( 'str:contains(pageName[i])' ){
                    LinksToActive = $(links[j]);
                    break;
                }
                else{
                    continue
                }
            }
    }
    $(LinksToActive).addClass('active');

    });

如何突出显示活动链接

2 个答案: