0

How can I make the whole tab, using an anchor tag in <li> tag, be clickable and to render resultant page?

Code:

<div id="tabs-container">
    <ul class="tabs-menu">
        <li id="attendee" class="current">
            <a href="{!$Site.BaseUrl}/apex/BLN_QUICKREGISTRATION?id={!$CurrentPage.parameters.id}&tab=attendee">Self Service Quick Registration</a>
        </li>
        <li id="staffwithpayment">
            <a href="{!$Site.BaseUrl}/apex/BLN_QUICKREGISTRATION?id={!$CurrentPage.parameters.id}&tab=staffwithpayment">Staff Quick Registration With Payments</a>
        </li>
    </ul>
</div>

css code::

<style>
#tabs-container {
    overflow: hidden;
    margin: 0px;
    margin-top: -10px;
    margin-left: -.7%;
    padding: 0px;
    clear: none;
    width: 103%;
    background: #fefefe;
    background: -moz-linear-gradient(top, #fefefe 0, #f3f3f3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #f3f3f3));
    background: -webkit-linear-gradient(top, #fefefe 0, #f3f3f3 100%);
    background: -o-linear-gradient(top, #fefefe 0, #f3f3f3 100%);
    background: -ms-linear-gradient(top, #fefefe 0, #f3f3f3 100%);
    background: linear-gradient(top, #fefefe 0, #f3f3f3 100%);
}

.tabs-menu {
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    outline: none;
}

.tabs-menu li {
    position: relative;
    /* top: 1px; */
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    /* background-color: #DDD; */
    list-style: none;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    padding: 11px 20px 9px 20px;
}

.tabs-menu li.current {
    background-color: #ffffff;
    border-bottom: 1px solid #fff;
    /* height: 14.4px; */
    -moz-box-shadow: inset 0 2px #2a90d3;
    -webkit-box-shadow: inset 0 2px #2a90d3;
    box-shadow: inset 0 2px #2a90d3;
}

.tabs-menu li:hover {
    background: -webkit-linear-gradient(top, #fcfcfc 0, #dedede 100%);
    background: #fcfcfc;
    background: -moz-linear-gradient(top, #fcfcfc 0, #dedede 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #dedede));
}

.tabs-menu li a {
    outline: none;
    focus: none;
    color: #555;
    font-weight: 300;
    text-decoration: none;
}

.tabs-menu .current a {
    outline: none;
    focus: none;
    color: #555;
    font-weight: 300;
}

.tab {
    border: 1px solid #d4d4d1;
    background-color: #fff;
    float: left;
    margin-bottom: 20px;
    width: auto;
}

.tab-content {
    width: 660px;
    padding: 20px;
    display: none;
}

#tab-1 {
    display: block;
}
</style>

enter image description here

2
  • You can add an onclick event listener to <li> directly and perform redirection when that event occurs.
    – ajinkyah
    Jan 13 '16 at 9:56
  • Hi Azinq,I tried using onclick event listener for li tag,the page desired page is not rendered Jan 14 '16 at 6:25
1

If I understand your question correctly, you're <a> is doing what you want to do, but if you click elsewhere in the <li> and not directly on the text, it's not taking you to the page you're specifying in the href=""?

Without knowing your Visualforce and CSS code, this is likely because if how the anchor tag fills the list tag. You can see this visually by inspecting the elements in a browser's developer tools.

This can be fixed by changing the CSS a little. If, for instance you've got CSS such as below:

.tabs-menu li {
    width: 200px;
    height: 100px;
}

You should be able to get the <a> to "fill" it's parent, in this instance the <li> by getting the anchor tag to inherit it's parents width and height. This would do that:

.tabs-menu a {
    width: 100%;
    height:100%;
}

The anchor tag will that take on it's parents dimensions.

4
  • Hi Poet,Thanks for reply. What you said above is exactly my requirement. Jan 13 '16 at 13:05
  • I tried to add css for that.But not getting desired result,i Dont know reason... i am sending the css what we used, can you change this as per the above requirement. Jan 13 '16 at 13:09
  • padding: 4px 10px; on .tabs-menu li might be causing a problem. You'll be pushing child elements inwards therefore your <a> wouldn't be able to cover the whole <li>.
    – Dan Jones
    Jan 13 '16 at 13:14
  • Hi Poet Thanks for reply, I have removed that padding ,but also <a>tag not able to cover the whole <li>.Let me know if any suggestions for alternatives for that.... Jan 14 '16 at 6:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.