1

我无法单击锚标记，但是当我们将鼠标悬停在该链接上时，它会显示链接路径

页面链接

当您点击现金流分析、税务分析、投资分析等任何部分时，您将在中心看到一些文本，其中包含不可点击的阅读更多链接。

下面是我使用的 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 部分（讨论目标和问题），因为其他部分的其余部分相同：

/ -----图形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

阅读更多链接是可点击的。您只需将 ref 设置为#，这会让您无处可去..

于 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 回答