0

私の問題は次のとおりです。ボタンをクリックしてページを更新すると、メニューで以前にアクセスしたリンクをクリアし (再び通常の状態に戻します)、現在のアクセス済みリンクを css で a:visited のままにします。

簡単だと思いますが、Webプログラミングを始めたばかりなので、助けが必要です。これを作る方法を見つけました。しかし、問題はそれが機能していないことです!! これは私が持っているコードです:

< ul id="menuTop">
  < li id="menu-link-1">
@Html.ActionLink("Home", "Index", null, null, new { id = "link-1-visited" }) < /li>
< li id="menu-link-2">
@Html.ActionLink("Produtos", "Products", null, null, new { id = "link-2-visited" })  < /li>
< li id="menu-link-3">
@Html.ActionLink("Fale Conosco", "ContactUs", null, null, new { id = "link-3-visited" })  < /li>
< li id="menu-link-4">
@Html.ActionLink("Quem Somos", "AboutUs", null, null, new { id = "link-4-visited" })  < /li>
< /ul>

これは私のボタンで、それらを「訪問」させるコードは次のとおりです。

$(document).ready(function() {
$('#link-1-visited').click(function() {
    $("#menu-link-1").removeAttr("menu-link-1");
    $(this).addClass('link-1-visited');
    window.alert("test 1 !!");
});

$('#link-2-visited').click(function() {
    $(this).addClass('link-1-visited');
    window.alert("test 2 !!");
});

$('#link-3-visited').click(function() {
    $(this).addClass('link-1-visited');
    window.alert("test 3 !!");
});

$('#link-4-visited').click(function() {
    $(this).addClass('link-1-visited');
    window.alert("test 4 !!");
});
});

CSSの私のコードは次のとおりです。

ul#menuTop li#menu-link-1 a {
    background-image: url("../Content/images/Menu/menu-image-1-alt.png");
    margin-right: 1px;
}

ul#menuTop li#menu-link-1 a:hover {
    background-image: url("../Content/images/Menu/menu-image-1-hover.png");
    margin-right: 1px;
}

.link-1-visited {
    padding: 40px 20px 20px;
    border-width: 3px;
    border-bottom: 0px;
    // more styles below...
}

ul#menuTop li a {
    border: 3px #98fb98 solid;
    border-bottom: 0px;
    //more styles below...
}

ul#menuTop li a:hover {
    padding: 40px 20px 20px;
    border-width: 3px;
    border-bottom: 0px;
    border-style: solid;
    //more styles below...
}

問題は、menu-link-1 の私のコードが機能していないことです。ul と lic css を削除し、クラス「link-1-visited」を追加したいと考えています。

どうすればそれができるかについてのアイデアはありますか?

4

2 に答える 2

2

基本的に、CSS で 1 つの色を維持するようにリンクを設定する必要があるため、...

a, a:visited { 
    color: blue;
}

そして、クリック イベントで jQuery を使用して色を変更するだけです。

$("a").click(function() {
    ($this).css({"color":"white"});
});

使用しているものに合わせて値を変更するだけで、すべて設定できます。

何をしようとしているのかについては、ここでセッション変数を調べてください: Java セッション変数

于 2013-07-23T02:20:51.253 に答える
0 

/* change the id name according to the page link you want to make focused */
var page = document.getElementById("index").href;
if (page == index) {
  document.getElementById("index").className = "active";
}
ul {
  list-style-type: none;
}

li a {
  display: block;
  cursor: pointer;
  text-decoration: none;
  padding: 10px 20px;
  font-size: 13.8px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-transform: uppercase;
  color: #555555;
  font-style: normal;
  white-space: nowrap;
  border-radius: 10px;
  transition: background-color .4s;
}

.active {
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  color: rgb(255, 204, 65);
}
<ul>
  <li><a id="index" href="index.html">Overview</a></li>
  <li><a id="wed" href="wed.html">Wedding</a></li>
  <li><a id="engage" href="engage.html">Engagement</a></li>
</ul>

于 2021-07-12T17:40:30.160 に答える