1

アンカー タグをクリックできませんが、そのリンクにカーソルを合わせるとリンク パスが表示されます

ページリンク

CASH FLOW ANALYSIS、TAX ANALYSIS、INVESTMENT ANALYSIS などのセクションをクリックすると、クリックできない [Read more] リンクを含むテキストが中央に表示されます。

以下は私が使用したJSコードです：

/*----------Text change on click - Our Process page---------------*/
var prev;
var IdAry = ['slide1', 'slide2', 'slide3', 'slide5', 'slide8', 'slide9', 'slide12', 'slide13', 'slide14', 'slide15', 'slide16'];
window.onload = function () {
    for (var zxc0 = 0; zxc0 < IdAry.length; zxc0++) {
        var el = document.getElementById(IdAry[zxc0]);
        if (el) {
            setUpHandler(el);
            el.onmouseover = function () {
                $(this).addClass("hover");
            }
            el.onmouseout = function () {
                $(this).removeClass("hover");
            }
        }
    }
}


function setUpHandler(el) {

/*---------This is used to add selected class on clicked id only and remove class selected from rest---------*/

$("#" + IdAry.join(",#")).click(function () {
    $(this).addClass("selected");
    $("#graphics .selected").not(this).removeClass("selected");
})

/*---------This will add show hide class to thier spans and vise versa-------*/

$("#" + IdAry.join(",#")).toggle(
function () {
    changeText(this, "hide", "show");
},
function () {
    changeText(this, "show", "hide");
})
}


function changeText(obj, cl1, cl2) {

    obj.getElementsByTagName('SPAN')[0].className = "hide";
    obj.getElementsByTagName('SPAN')[1].className = "show";

    if (prev && obj !== prev) {
        prev.getElementsByTagName('SPAN')[0].className = "show";
        prev.getElementsByTagName('SPAN')[1].className = "hide";
    }
    prev = obj
}

以下はCSSコードですが、残りは他のセクションでも同じであるため、セクション1（目標と懸念事項の議論）までお見せしました。

/ -----Graphics 2 プロセス ページはここから始まります---- /

#graphics
{
    float:left;
    width:100%;
    position:relative;
}

#graphics .show a.readmore
{
    float:right;
    padding:10px 0;
}

#graphics .hover
{
    cursor:pointer;
}

span.show 
{
    display:block;
}

span.hide 
{
    display:none;
}

#span1
{
    font-size:13px !important;
}

#graphics .row1, #graphics .row2, #graphics .row3, #graphics .row4
{
    float:left;
    width:100%;
}

.circleBg
{
    float:left;
    position:absolute !important;
    top:150px;
    left:215px !important;
    height:200px;
    width:275px;
}

#graphics #slide1 #span1, #graphics #slide2 #span1, #graphics #slide3 #span1, #graphics #slide4 #span1, #graphics #slide5 #span1, #graphics #slide6 #span1, #graphics #slide7 #span1, #graphics #slide8 #span1, #graphics #slide9 #span1, #graphics #slide10 #span1, #graphics #slide11 #span1, #graphics #slide12 #span1, #graphics #slide13 #span1, #graphics #slide14 #span1, #graphics #slide15 #span1, #graphics #slide16 #span1
{
    display:none;
}

#graphics #slide1 span.show, #graphics #slide2 span.show, #graphics #slide3 span.show, #graphics #slide4 span.show, #graphics #slide5 span.show, #graphics #slide6 span.show, #graphics #slide7 span.show, #graphics #slide8 span.show, #graphics #slide9 span.show, #graphics #slide10 span.show, #graphics #slide11 span.show, #graphics #slide12 span.show, #graphics #slide13 span.show, #graphics #slide14 span.show, #graphics #slide15 span.show, #graphics #slide16 span.show
{
    color:#000;
    float:left;
    position:absolute !important;
    top:150px;
    left:215px !important;
    height:200px;
    width:235px;
    background-color:#fff;
    text-align:center;
    padding:0 20px;
    cursor:default;
}

#graphics .row1 #slide1
{
    float:left;
    width:204px;
    height:112px;
    background:url('/pages/images/row1-1.jpg') 0 0 no-repeat;
}

#graphics .row1 #slide1.hover, #graphics .row1 #slide1.selected
{
    background:url('/pages/images/row1-1.jpg') 0 -112px no-repeat !important;
    text-decoration:none !important;
}

以下は HTML コードです。

<div id="graphics">
    <img src="images/circle-bg.jpg" alt="" class="circleBg"/>
    <div class="row1">
        <div href="#" id="slide1" id="selectedSlide">
            <span id="span1"></span>
            <span class="hide"></span>
        </div>
        <div href="#" id="slide2">
            <span id="span1"></span>
            <span class="hide">At this stage, we sit down together and discuss your life goals and begin to develop a plan for funding them. Without knowing where you want to go, we can't help get you there! This is the time to ask a lot of questions and get to know each other. <a href="">Read More..</a></span>                        
        </div>
        <div href="#" id="slide3">
            <span id="span1"></span>
            <span class="hide">We need to know your current income and expenses in order to gain a better understanding of resources that can be applied toward your financial goals. We also determine the appropriate size of your emergency fund. <a href="">Read More..</a></span>
        </div>
        <div href="#" id="slide4">
            <span id="span1"></span>
            <span class="hide"></span>                      
        </div>
    </div>
</div>

私の要件は、[続きを読む] リンクをクリックして、そのページを新しいタブで開くことだけです。

前もって感謝します

4

2 に答える 2

3

[続きを読む] リンクはクリック可能です。参照を として設定しただけで#、どこにも行きません..

于 2012-08-10T06:54:00.667 に答える
1

問題は、このトグルイベントをこのクリックイベントに置き換えようとしたときにクリックイベントを使用する必要があるトグルではなく、このトグルイベントにあります:)

古い JS コード:

$("#" + IdAry.join(",#")).toggle( // instead of toggle we can use click event
function() 
{ 
    changeText(this, "hide", "show"); 
},
function() 
{ 
    changeText(this, "show", "hide"); 
})
}

新しいコード:

$("#" + IdAry.join(",#")).click( //replace toggle with click event
function() 
{ 
    changeText(this, "hide", "show"); 
},
function() 
{ 
    changeText(this, "show", "hide"); 
})
于 2012-08-10T07:15:40.593 に答える