-1

このようなページに横向きのメニューがあります

<link rel="stylesheet" type="text/css" href="/classified/siteassets/css/mymenu.css" />
<div id="content-container">
<ul>
    <li><a href="http://mysite/Classified/Pages/Training.aspx">Training</a></li>
    <li><a href="http://mysite/Classified/Pages/Briefing.aspx">Briefing</a></li>     
    <li><a href="http://mysite/Classified/Pages/Resources.aspx">Resources</a></li>
</ul>
</div>

メニューのスタイルは次のとおりです。

#content-container {
    font-family: "Trebuchet MS", Verdana, serif;
    width:100%;
    margin:0 auto;
    padding:0;
}    
#content-container ul {
    border-bottom: 18px solid #C93;
    list-style: none;
    margin:0 -10px;;
    padding-bottom: 1px;
    overflow: visible;
    width:98%;
}    
#content-container ul li {
    float: left;
    padding:0;
    margin:0;
    text-align: center;
    width: 14.25%;
}    
#content-container ul li a {
    border-left: 1px #fff solid;
    line-height:36px;
    text-decoration:none;
    color:#ddd;
    background-color:#2E4B68;
    display:block;
    font-size:1.5em;

}
#content-container ul li a:hover {
    background-color: #C93;
    color:#000;
}

リンクの1つをクリックすると、それぞれのページが開きます。開いたメニュータブで、ホバーカラーと同じ色にする必要があります。これを行うには、javascriptを使用してURLを確認し、jqueryを使用してそのliアイテムの背景色をホバーカラーと同じに動的に設定して、開いたページを見つけ、ユーザーが現在開いているページであることを認識できるようにします。どうすればこれを行うことができますか？

4

4 に答える 4

0

私はあなたが欲しいものはこのようなものだと思います：

jQuery(document).ready(function(){
    jQuery("#content-container a").each(function(){
        if(jQuery(this).attr("href")==location.href)
              jQuery(this).css({"background-color": "#C93",color:"#000"});
    });
});

それはあなたのメニューを調べ、リンクが現在のページアドレスと一致しているかどうかを確認し、そのスタイルを設定します。

ただし、これには実際にcssクラスを使用する必要があります。

PS：テストされていないコード。

于 2012-06-15T03:56:28.907 に答える
0 
$(function(){
  $("#content-container").on({"mouseover":function(){
// when you mouseover a 'ul li a' this event fires. store it's current background color
   $(this).data("background-color",$(this).css("background-color"));
  },"click":function(event){
// someone clicked it, grab the color and set the parent li background-color
   $(this).parent().css({background-color:$(this).data("background-color")});
  }},"ul li a", null);
});
于 2012-06-15T03:46:03.513 に答える
0

これを試して

$(document).ready( function() {
    $("#content-container ul li a").each(function(i, item) {
        if($(item).attr("href") == window.location) {
            $(item).css("background-color, #c93");
        }
    });
});
于 2012-06-15T04:11:40.410 に答える
0

onclickイベントを使用して、タブの背景色を動的に変更します（クラスで目的の色を設定します）。

完全に願っています、このリンクはあなたを助けるかもしれません。

http://api.jquery.com/css/

于 2012-06-15T06:53:26.680 に答える