0

いくつかのリンクがあるページを作成しようとしていますが、それらをクリックすると、同じページにテキストが表示されます。私はjavascript/jQueryでそれを行いましたが、正常に動作します。

私が仕事をしようとしているのは、アクティブなリンクのレイアウトを変更することです。そのテーマに関する以前の質問を数時間探しましたが、javascript / jQueryを初めて使用するため、少し迷っています。

これがFIDDLEです。あなたは私がしたことを見るでしょう。アクティブなリンクのレイアウトについてサポートが必要です。たとえば、リンクのテキストに別の色を付けたいので、どのリンクがアクティブであるかがわかります）

これが私のhtmlコードです：

<div id="fond_soins">
    <a class"asoins" href="javascript:showonlyone('onglet1');" >
        <span class="icon">
            <div id="acu1">
                <h3 class="onglet">Titre 1</h3>
            </div>
    </a>
    <a class"asoins" href="javascript:showonlyone('onglet2');" >
        <span class="icon">    
            <div id="acu2">
                <h3 class="onglet">Titre 2</h3>
            </div>
    </a>
    <a class"asoins" href="javascript:showonlyone('onglet3');" >
        <span class="icon">
            <div id="acu3">
                <h3 class="onglet">Titre 3</h3>
            </div>
        </a>
</div>

<div class="clear"></div>

<div id="contenu_soins">
    <div class="newboxes" id="onglet1">
        <div class="rectangle"></div>
            <h2 class="titre_bloc">Titre1</h2>
            <div class="clear"></div>
            <div class="contenu-texte">
                <div class="contenu-texte"><p>bloc 1</p></div> </div>
            </div>
            <div class="newboxes" id="onglet2">
                <div class="rectangle"></div>
                    <h2 class="titre_bloc">Titre2</h2>
                    <div class="clear"></div>
                    <div class="contenu-texte"><p>bloc 2</p></div>
                </div>
                <div class="newboxes" id="onglet3">
                    <div class="rectangle"></div>
                        <h2 class="titre_bloc">Titre3</h2>
                        <div class="clear"></div>
                        <div class="contenu-texte"><p>bloc 3</p></div>
                    </div>
                </div>

これがCSSです：

#fond_soins {
    height:280px;
    background-color:#FFF;
    width:100%;
}
#contenu_soins {
    background-color:#FFF;
    margin-top:30px;
    min-height: 242px;
    padding-top: 11px;    
}
.newboxes {
    padding-left:30px;
    padding-right:30px;
    padding-bottom:30px;
}
a.asoins, a.asoins:hover {
    text-decoration: none;
}
#acu1 {
    margin-left: 6em;
}

#acu1, #acu2, #acu3 {
    width:15%;
    height:165px;
    border-radius: 15px;
    border-style:solid;
    border-color: #E5EAD9;
    border-width:5px;
    color:#777;
    float:left;
    margin-right:1em;
    margin-top:69px;
}
#acu1:hover,#acu2:hover,#acu3:hover {
    border-color:#333;
    color:#333;
    text-decoration:none;
}

h3.onglet {
    text-align:center;
    padding-top:135px;
}

#onglet1 {
    display:block;
}
#onglet2, #onglet3 {
    display:none;
}

#acu1.active, #acu2.active, #acu3.active {
    border-color:#333;
    color:#333;
    text-decoration:none;
}

これがJavascriptです

function showonlyone(thechosenone) {
    $('.newboxes').each(function(index) {
        if ($(this).attr("id") == thechosenone) {
            $(this).show();    
        }
        else {
            $(this).hide();
        }
    });
};
4

3 に答える 3

3

「アクティブ」として新しいcssクラス名を1つ作成します。

    .active #acu1,.active #acu2,.active #acu3
    {
        text-decoration: underline;
        border-radius: 15px;
        border-style: solid;
        border-color: Black;
        border-width: 5px;
    }

ここで、javascript関数を少し修正し、たとえば次thisのように演算子を 送信して引数をもう1つ追加 し、js関数を次のように変更します。 <a class"asoins" href="javascript:void(0);" onclick="javascript:showonlyone('onglet3',this);" ></a>

function showonlyone(thechosenone,CurrCtrl) {

     $(".asoins").removeClass("active");
     $(CurrCtrl).addClass("active");

     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show();    
          }
          else {
               $(this).hide();
          }

     });

};
于 2012-12-11T12:32:23.257 に答える
0

これを試して：

$(function(){
    var links = $('.asoins');

    links.click(function(){
        $(this).toggleClass('activelink', true);
        links.not(this).toggleClass('activelink', false);
    });
});

CSS：

#acu1:hover,#acu2:hover,#acu3:hover, #fond_soins .activelink div {
    border-color:#333;
    color:#333;
    text-decoration:none;
}

デモ：http：//jsfiddle.net/yJYTT/119/

于 2012-12-11T12:38:30.750 に答える
0

私は純粋なCSSソリューションが好きなので、これを作成しました。

http://jsfiddle.net/vucMe/

#a:checked ~ label[for=a]ラジオボタンとして機能するラベルのスタイルを設定するために使用します

于 2012-12-11T12:41:13.663 に答える