我的链接使用 jquery 无法正常工作

My link is not working well using jquery

本文关键字：常工作 工作 链接 jquery 我的      更新时间：2023-09-26

我有一个这样的链接

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

名中不需要点（.）。

试试这个：

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

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

相关文章：