这是什么 jQuery 脚本？答案

【问题标题】：What JQuery script is this?这是什么 jQuery 脚本？
【发布时间】：2010-11-28 04:21:03
【问题描述】：

http://jqueryui.com/demos/autocomplete/#combobox

在右侧，有选择器选项卡（选定的箭头指向左侧）

这是什么 CSS 菜单？为什么我在 JQuery UI 网站上找不到这个？

【问题讨论】：

这只是简单的 html + css。不需要 javascript/jquery。查看源代码，和/或使用浏览器的 dom 检查器。向左的箭头只是一个由 css a:hover 规则应用的背景图像。
@lee javascript 用于添加类，因此 li 和 a 具有样式。该类未添加到 a:hover 上。 javascript 也被用于在点击时将内容加载到内容区域。
@john - 你是对的，但我应该指出，javascript 不需要，以便使用左箭头和鼠标悬停呈现菜单影响。这一切都可以通过:hover 选择器通过html+css 完成。
@lee，怎么样？箭头是在点击时添加的，而不是在悬停时添加的
@john：你是对的。应该说：鼠标悬停效果可以用css:hover来完成。向左箭头可以通过分配给当前选定项目的单个 css 类来完成。在非 javascript 增强站点中，每个页面都是从服务器单独加载的，因此每个页面的菜单将在该页面的正确菜单项上包含 selected 类。我不是说“不要为此使用 javascript”，我只是指出它不是必需的。如果您确实使用 js 实现了这一点，您还需要使用某种形式的深度链接（这可能比 OP 想要的工作量更多）。

标签： javascript jquery html css templates

【解决方案1】：

它不是一个插件，它是页面上的一个简单的 html/css/javascript。

控制菜单的javascript在http://jqueryui.com/js/demos.js中。

具体部分：

//Rewrite and prepare links of right-hand sub navigation
    $('#demo-config-menu a').each(function() {
        $(this).attr('target', 'demo-frame');
        $(this).click(function(e) {

            resetDemos();
            $(this).parents('ul').find('li').removeClass('demo-config-on');
            $(this).parent().addClass('demo-config-on');

            //Set the hash to the actual page without ".html"
            window.location.hash = this.getAttribute('href').match((/\/([^\/\\]+)\.html/))[1];

            loadDemo(this.getAttribute('href'));
            e.preventDefault();

        });
    });

【讨论】：