0

我有这样的链接

 <li><a class='myclass' href="<?php echo base_url();?>index.php/controller">Search</a></li>

我的jQuery是

 $("a.myclass").click(function(){
 var link  = $(this);
 var url = link.attr("href");
 $(".content").load(url); 

 return false; 

});

实际上它正确链接问题是我的菜单中的列表看起来很难看，但它看起来应该是虽然其他 li 看起来不错。当我更改为

 <li><a class='.myclass.' href="<?php echo base_url();?>index.php/controller">Search</a></li>

它看起来正确，但它没有链接到任何东西。

这里有什么问题？

这是我的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;

}
4

2 回答 2

1

您不需要类名中的点 (.)。

尝试这个：

<li><a class='myclass' href="<?php echo base_url();?>index.php/controller">Search</a></li>

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

});
于 2013-01-31T14:42:58.677 回答
0

好吧，我需要更多的条件来准确回答，但我想有一些 css 样式用于myclass. 尝试将 myclass 重命名为类似的名称f-ajax-link-selector（不要忘记在 JS 中更改它）并尝试刷新页面。

于 2013-01-31T14:42:45.663 回答