Jump to content

My links will not work? Can you Help?


Canadian

Recommended Posts

I'm using a jQuery vertical tab script.  For some reason I cannot get links or YouTube videoS inside of the tabs to work.  Any idea why?  Below is the HTML, CSS and JS.

 

Any help would be greatly appreciated!

 

Thanks,

 

JS

 

jQuery(document).ready(function($) {var a=$("#vtab>ul>li");

a.mouseover(function(){a.removeClass("selected");

$(this).addClass("selected");

var b=a.index($(this));

$("#vtab:first>div").hide().eq(b).show()}).eq(0).mouseover()});

 

HTML

 

<div id="vtab">

    			<ul>
				<li class="day_one"></li>
				<li class="day_two"></li>
				<li class="day_three"></li>
				<li class="day_four"></li>
			</ul>

			<div>

        			<h2>Day 1</h2>

        			DAY 1 CONTENT
        			
        			<a href="http://www.google.com">Click here</a>
        			
        			

    			</div>

    			<div>

        			<h2>Day 2</h2>

        			DAY 2 CONTENT

    			</div>

    			<div>

        			<h2>Day 3</h2>

        			DAY 3 CONTENT

    			</div>
    			
    			<div>

        			<h2>Day 4</h2>

        			DAY 4 CONTENT

    			</div>
    	
		</div>

 

 

CSS

 

#vtab {
    margin: auto;
    width: 940px;
    min-height:350px;
}
#vtab > ul > li {
    width: 80px;
    height: 80px;
    background-color: #ffffff !important;
    list-style-type: none;
    display: block;
    text-align: center;
    margin: auto;
    padding-bottom: 10px;
    border: 1px solid #fff;
    position: relative;
    border-right: none;
    opacity: .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
}
#vtab > ul > li.day_one {
    background: url('day_1.png') no-repeat center center;
}
#vtab > ul > li.day_two {
    background: url('day_2.png') no-repeat center center;
}
#vtab > ul > li.day_three {
    background: url('day_3.png') no-repeat center center;
}
#vtab > ul > li.day_four {
    background: url('day_4.png') no-repeat center center;
}
#vtab > ul > li.selected {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    border: 1px solid #ddd;
    border-right: none;
    z-index: 10;
    background-color: #ffffff !important;
    position: relative;
}
#vtab > ul {
    float: left;
    width: 80px;
    text-align: left;
    display: block;
    margin: auto 0;
    padding: 0;
    position: relative;
    top: 0px;
}
#vtab > div {
    margin-left: 80px;
    border: 1px solid #ddd;
    min-height: 500px;
    padding: 10px;
    position: relative;
    z-index: -1;
    -moz-border-radius: 20px;
}
#vtab > div > h4 {
    font-size: 18px;
margin: 0px;
padding: 0px;
}

/*IE7 Support*/

#vtab > ul > li.selected{
    border-right: 1px solid #fff !important;
}
#vtab > ul > li {
    border-right: 1px solid #ddd !important;
}
#vtab > div {
    z-index: -1 !important;
    left:1px;
}

Link to comment
https://forums.phpfreaks.com/topic/254833-my-links-will-not-work-can-you-help/
Share on other sites

Here is the solution...

 

Remove  position: relative; from...

 

 

#vtab > div {
    margin-left: 80px;
    border: 1px solid #ddd;
    min-height: 500px;
    padding: 10px;
    position: relative;
    z-index: -1;
    -moz-border-radius: 20px;
}

 

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.