Question

我是javascript和jquery的新手，但我正在尝试创建一个允许用户点击国家/地区名称的页面，该国家/地区的信息将从单独的html文件中加载div。

此外，我发现此代码可以很好地使用.click(function)标记上的<a>：

var $j = jQuery.noConflict();

$j(document).ready(function(){
    $j("a").click(function(){
        $j.ajax({
            url: $j(this).attr("href"),
            success: function(response) {
                $j("#partnerContent").html(response);
            }
        });
        return false;
    });
});

这是基本的html：

<div id="contentcontain">
    <div class="partnercol1">
        <div class="container">
            <div id="menu" class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown">International Sales <span class="caret"></span></button>
                <ul class="dropdown-menu scrollable-menu" role="menu">
                    <li><a href="partners/belgium.html">Belgium</a></li>
                    <li><a href="partners/brunei.html">Brunei</a></li>
                    <li><a href="partners/bulgaria.html">Bulgaria</a></li>
                </ul>
            </div>
      </div>
  </div>
  <div class="partnercol2">
      <div id="partnerContent"></div>
  </div>

但是，现在页面上的每个<a>标记（包括顶部和底部菜单）都会在点击时将href加载到div中。如何只定位包含状态菜单的div才能使用此功能？

Answer 1

使您要将事件附加到元素的选择器更具限制性：

// this selects all the anchors below the items with ID menu
$j("#menu a").click(function () {
    ...
});

Answer 2

在你的HTML中

，放：

<ul class="dropdown-menu scrollable-menu" role="menu">
    <li><a class="menu-item" href="partners/belgium.html">Belgium</a></li>
    <li><a class="menu-item" href="partners/brunei.html">Brunei</a></li>
    <li><a class="menu-item" href="partners/bulgaria.html">Bulgaria</a></li>
</ul>

并在你的javascript中

var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(".menu-item").click(function(){
 $j.ajax({
  url: $j(this).attr("href"),
  success: function(response) {
   $j("#partnerContent").html(response);
  }
});
 return false;
});
});

Answer 3

您正在加载整个html页面，这意味着您正在加载

<html>...</html>

然后将其全部填入您的页面，这意味着您最终会

<html>
    ....
    <html>...</html>
    ...
</html>

无效。如果您尝试替换页面中单个<div>的内容，则可以将整个页面提取到var中并切出所需的块，或者让jquery获取/插入 ONLY < / strong>你想要的部分，例如

$('#div_to_replace').load('source_of_new.html #id_of_element_to_use_for_replacement');

注意#...调用中的第二个.load()参数。这告诉jquery忽略页面EXCEPT中指定元素/ ID的所有内容。只有该ID的内容才会被填充到#div_to_replace。

如何在单击时将单独的html页面加载到div中？

3 个答案: