在悬停时无法单击锚标记但显示链接

Question

I am not able to click on anchor tag but when we hover over that link it shows link path

Page Link

When you click on any section like CASH FLOW ANALYSIS, TAX ANALYSIS, INVESTMENT ANALYSIS etc you will see some text in center with Read more link which is not clickable.

Below is the JS code that i have used:

/*----------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
}

Below is the CSS code but i have show you till section 1 (DISCUSS GOALS AND CONCERNS) because rest is same for other sections:

/ -----Graphics 2 our process pages starts here---- /

#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;
}

Below is HTML code:

<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>

My requirement is just to click on Read More link open that page in new tab.

Thanks in Advance

Answer 1

The Read More link is clickable. You just have the ref set as # , which takes you nowhere..

Answer 2

The problem is with this toggle event instead of toggle we have to use click event when i tried to replace this toggle event with this click event it work well :)

Old JS code:

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

New code:

$("#" + IdAry.join(",#")).click( //replace toggle with click event
function() 
{ 
    changeText(this, "hide", "show"); 
},
function() 
{ 
    changeText(this, "show", "hide"); 
})