1

まず第一に、私は非常に基本的なプログラミング レベルにいると言わなければなりません。これらの質問に対する答えは、一部の人にとっては非常に明白かもしれませんが、これらすべてをまとめる方法が思い浮かびません。前もって感謝します。

私はこのHTMLコードを持っています:

<div id="vectores" class="categoria" onclick="this.style.color='#000'; this.style.textDecoration='underline'; mostraVectores('vectores0','vectores')" onmouseover="this.style.color='#000'; this.style.textDecoration='underline'" onmouseout="this.style.color='#999'; this.style.textDecoration='none'">Tema 1. Mec&aacute;nica vectorial</div>
    <div id="vectores0" class="subcategoria"></div>

ここで「onclick」を使用して、スタイルのこの変更を「永続的」にします。これを「メニューオプション」にしたいので、機能をトリガーするだけでなく、簡単に伝えられるように外観を変更したいからです選ばれたか否か。「onmouseover」を使用して、ポインターが常に「選択しようとしている」ものをユーザーに知らせています（メニューにはより多くのオプションがあります）。

問題は、それらが一緒に機能しないことのようです。「onmouseover」によって新しいスタイルが設定されると、2番目のイベント（onclick）が要求した場合、コンパイラはdivに同じスタイルを再度設定しないためだと思います。

クラスのCSSコードは次のとおりです。

.categoria{
color:#999;
font-weight:bold;
padding:2px;
padding-left:10px;
cursor:pointer;
}

次に、別のJavaScriptページと次のような関数を使用して、スタイルの変更を「永続的」にすることを考えました。

function mostraVectores(cosa1,cosa2){

document.getElementById(cosa1).style.display="block";

document.getElementById('equilibrio').style.color="#999";
document.getElementById('estructuras').style.color="#999";
document.getElementById('centros').style.color="#999";
document.getElementById('momento').style.color="#999";
document.getElementById('inercia').style.color="#999";
document.getElementById('rozamiento').style.color="#999";

document.getElementById('equilibrio').style.textDecoration="none";
document.getElementById('estructuras').style.textDecoration="none";
document.getElementById('centros').style.textDecoration="none";
document.getElementById('momento').style.textDecoration="none";
document.getElementById('inercia').style.textDecoration="none";
document.getElementById('rozamiento').style.textDecoration="none";

document.getElementById(cosa2).style.color="#000";
document.getElementById(cosa2).style.textDecoration="underline";

}

ここでわかるように、この関数が他の関数の後に実行された場合に備えて、下線を付けずに灰色にしたい他の「メニューオプション」があります (元は css に従っているため)。彼があるトピックから別のトピックに変わるとき、2 つの「選択されたような」メニュー オプションで終わります。問題は、この方法でスタイルを「リセット」すると、div の「onmouseover/onmouseout」が機能しなくなることです。

これを修正するにはどうすればよいですか?

4

1 に答える 1

1

必要なアプローチは、CSS を使用し:hover、クリック時にクラスを割り当てることです。

HTML

<div id="vectores" class="categoria" onclick="mostraVectores('vectores0','vectores')">Tema 1. Mec&aacute;nica vectorial</div>
    <div id="vectores0" class="subcategoria"></div>

CSS

.categoria {
    color: #999;
    font-weight: bold;
    padding: 2px;
    padding-left: 10px;
    cursor: pointer;
}

.categoria:hover { /* This is applied on mouseover and removed on mouseout */
    color: #000;
    text-decoration: underline;
}

.categoria.active { /* Not sure what you want when clicked */
    color: #900;
    text-decoration: underline;
}

JS

function mostraVectores(cosa1,cosa2){
    //add this to your function
    this.className += " active";
于 2013-10-22T09:27:45.610 に答える