My link is not working well using jquery - php

Question

I have a link like this
<li><a class='myclass' href="<?php echo base_url();?>index.php/controller">Search</a></li>
and my jquery is
$("a.myclass").click(function(){
var link = $(this);
var url = link.attr("href");
$(".content").load(url);
return false;
});
actually it links correctly the problem is my list in my menu looks ugly not it looks it should be though other li looks ok. when i change to
<li><a class='.myclass.' href="<?php echo base_url();?>index.php/controller">Search</a></li>
it looks correctly but its not linking to anything.
What is the problem here?
Here is my css
.webwidget_vertical_menu {
float: left;
width: 20%;
background-color: #fff;
padding-bottom: 10px;
}
.webwidget_vertical_menu ul{
padding: 0.5px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.webwidget_vertical_menu li{
}
.webwidget_vertical_menu ul li{
list-style: none;
position: relative;
}
.webwidget_vertical_menu ul li a{
padding-left: 15px;
text-decoration: none;
}
.webwidget_vertical_menu ul li ul{
display: none;
position: absolute;
background-color: #fff;
z-index: 999999;
}
.webwidget_vertical_menu ul li ul li{
position: relative;
margin: 0px;
border:none;
}
.webwidget_vertical_menu ul li ul li ul{
}
.webwidget_vertical_menu_down_drop{
background-position: right center;
background-repeat:no-repeat !important;
}
.webwidget_vertical_menu ul li li{
font-weight: normal;
}
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 80%;
max-width: 1260px;
background: #FFF;
margin: 0 auto;
}
.header {
background-color: #ADB96E;
}
.sidebar1 {
float: left;
width: 20%;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 60%;
float: left;
}
.sidebar2 {
float: right;
width: 20%;
background-color: #EADCAE;
padding: 10px 0;
}
.content ul, .content ol {
padding: 0 15px 15px 40px; }
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
list-style: none;
position:relative;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background-color: #C6D580;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #ADB96E;
color: #FFF;
}
/* ~~The footer ~~ */
.footer {
padding: 10px 0;
background: #CCC49F;
position: relative;
clear: both;
}
/* ~~miscellaneous float/clear classes~~ */
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.menu {
color: #414141;
font-size:16px;
font-weight:650;
text-align: center;
}

Answer 1

You don't need the dot (.) in class name.
Try this:
<li><a class='myclass' href="<?php echo base_url();?>index.php/controller">Search</a></li>
And jquery...
// This means select the `<a>` element with class `myclass`.
// Dot (.) means class selector.
$("a.myclass").click(function(){
var link = $(this);
var url = link.attr("href");
$(".content").load(url);
return false;
});

Answer 2

Well, I need more conditions to answer exactly, but I guess there are some css styles for myclass. Try to rename myclass to something like f-ajax-link-selector (don't forget to change it in JS) and try to refresh the page.