Tag: css

单击选择的jQuery toggleClass – 在左键单击和右键单击: 我在div中有多个图像。单击图像时，应切换选择和取消选择等内容。一次只能选择一个img或者没有。我使用下面的代码： function imageSelect(img) { $(“#” + img.id).toggleClass(“htmlView_img_select_toggle”); $(‘#snapshotsRpt > img’).click(function (e) { e.preventDefault; $(‘.htmlView_img_select_toggle’).removeClass(‘htmlView_img_select_toggle’); $(this).addClass(‘htmlView_img_select_toggle’); }); }; 但最终，至少有一个将继续被选中。我不希望这样。我仍然可以通过再次单击但使用单选function取消选择图像。 HTML代码是： htmlBody+=”; if (imgArray && imgArray.length>0){ for (var i=0;i<imgArray.length;i++){ htmlBody+='’; } } htmlBody+=”; 我是jquery的新手。请帮忙！

将标签文本拖到段落中: 我想通过将标签拖放到段落的特定路径中来复制段落中标签的文本。例如 i am new to JavaScript` 在拖动示例之前 i am a student and ; 当我在段落的末尾拖动标签时。因此标签文本应该复制到段落的末尾并且变为。 i am a student and i am new to JavaScript ;

着色css形状与不同的颜色: 我正在寻找一种解决方案来为一些css形状着色（不要像在这个例子中那样使用svg： http ： //bl.ocks.org/widged/4545199 ，但输出结果非常相似）。我还需要的是将这些形状保存在不同颜色数组的ID中。在我的例子中，我正在使用带有id的asd和fgh的div 。我想从左边的方块中选择颜色，然后点击它们在右边选择的方块，然后将颜色更改为之前选择的颜色。我需要一些方法来存储哪个方块被分配给哪种颜色。之后我就不得不将这些数据传递给php，但我想能够独自完成这项工作。这个例子在这里。来源：的index.php var colors = [“white”,”red”,”blue”,”green”,”yellow”,”purple”]; var index = 0; function button_click() { index = (index + 1) % colors.length; document.getElementById(“box”).style.backgroundColor = colors[index]; } mystyle.css div#box { width:20px; height:20px; background-color: white; border-color: black; border-style: solid; border-width: 1px 1px 1px 1px; float: left; […]

JQuery – 禁用提交按钮，除非原始表单数据已更改: 我在这里找到了以下代码（禁用提交按钮，除非原始表单数据已更改）并且它有效，但对于我的生活，我无法弄清楚如何更改相同提交按钮的属性，文本和CSS。我希望启用/禁用按钮时文本，背景和hover背景不同，并且还要切换另一个可见/隐藏的DIV。 $(‘form’) .each(function(){ $(this).data(‘serialized’, $(this).serialize()) }) .on(‘change input’, function(){ $(this) .find(‘input:submit, button:submit’) .prop(‘disabled’, $(this).serialize() == $(this).data(‘serialized’)) ; }) .find(‘input:submit, button:submit’) .prop(‘disabled’, true); 有人可以提供样品。我没有留下的头发拉出来:-)

根据数量设置具有相同类别的多个元素的宽度: 我遇到的问题类似于以前的问题。我试图给多个元素一个宽度，具体取决于它们有多少。假设我有5个元素，它们的宽度必须是20％，如果我有4个25％等（宽度= 100 / n）我认为这会起作用，但它没有： if ($(window).width() <= 960) { $("aside.widget").css("width", function(){ var widgetLength = $("section#secondary").children("aside.widget").length(); return 100 / widgetLength + "%" }); } 也不是： if ($(window).width() <= 960) { $("aside.widget").css("width", 100 / widgetLength + "%"); } 控制台返回： Uncaught TypeError: Property ‘length’ of object [object Object] is not a function 有什么想法吗？谢谢。

切换菜单onclick，单击菜单链接关闭 – 但仅限于移动视图: 当窗口宽度低于768px时，我为单页网站制作了响应式菜单，切换到可切换菜单。基本上我希望通过单击标题来切换菜单，然后通过再次单击菜单链接（ li -element）来关闭菜单。到目前为止我的jQuery代码： jQuery(document).ready(function() { var e = $(“#pull”); menu = $(“#header ul”), $(e).on(“click”, function(e) { e.preventDefault(), menu.slideToggle() }), $(window).resize(function() { menu.is(“:hidden”) && menu.removeAttr(“style”) }) }); $(“#header ul”).on(“click”, “li”, function () { $(“#header ul”).hide(); }); 还有一个演示的jsfiddle： http ： //jsfiddle.net/ansoqvms/2/ 因此，单击标题时打开和关闭菜单工作正常。当点击菜单li -element时，菜单也会消失。遗憾的是，当单击菜单链接时，菜单不仅会在移动视图中消失，而且还会在普通视图中（> 768px）消失。我尝试使用if($(window).width() < 768px) ，但这不是跨浏览器的快乐。我也尝试使用if($(‘#pull’).is(‘:visible’)) ，因为#pull仅在移动视图中可见，但它也没有用。

始终在区域内的顶部div: 我创建了一个始终位于顶部的div .visibleDiv, #topLeft { position: fixed; width: 150px; border: solid 1px #e1e1e1; vertical-align: middle; background: #ffdab9; text-align: center; } #topLeft { top: 10px; left: 10px; } 我这样显示它 Top Left 但我也有一个叫做容器的div。我希望topLeft留在该容器的左上角而不是屏幕的左上角。我对css很陌生，一直在摸索如何实现这样的效果。所以为了更清楚地解释，我想尝试达到这个效果 ______________ |Other things| |____________| ________________________________ | TOP LEFT MESSAGE| | |_________________| | | | | | | CONTAINER DIV | | | […]

错误渲染的星级评级jquery星级评分小部件和分裂星: 我在我们的下一个项目中使用了jquery star widget，它在过去的其他项目中运行良好，现在它可以正常工作，但是客户端已经请求了以下两个事实： 1）小部件需要5颗星，分成两半，如网站上的api 2页面所示（ http://orkans-tmp.22web.net/star_rating/#main-menu=2 ） 2）他们想要大型明星设计，如第6页的演示文稿所示（ http://orkans-tmp.22web.net/star_rating/#main-menu=3&demo-tabs=5 ）现在，结合2，（大星css和半星选项（{split：2}），lahout是乱码…看起来插件给jquery的元素提供了8px的宽度，为什么这不是在css中处理？如何在不更改插件本身的情况下解决它（为了在将来更新时保持安全）

将Bootstrap Active nav-pills标签边框底部形状更改为实线下划线: 尝试将nav-pills边框底部的Bootstrap Active Tab更改为矩形。端点是弯曲的，无法将其更改为实心下划线。请参阅此链接：Bootstrap Nav Pills – JSFiddle – 我不知道如何在这里放置jsfiddle链接。 anwyasys。下面是代码。请帮忙。 jquery以上2.X版本使用。无法正确解析jsfiddle.net链接插入 $(document).ready(function () {console.log(“highlight.js file executed…”); $(‘ul.nav > li > a’).click(function (e) { e.preventDefault(); $(‘.initial-active’).removeClass(‘initial-active’); $(‘ul.nav > li > a’).removeClass(‘active’); $(this).addClass(‘active’); }); }); Bootstrap Navpills PQ CA DL MP PQ PQ section. CA CA section DL DL section MP MP […]

如果选择了子菜单，则展开父菜单: 我有一个带子子菜单的菜单。我面临的问题是，无论何时我在页面加载后选择子菜单，菜单都会崩溃。我想打开扩展的父菜单。 HTML代码是： Home Products Product 1 Sub Product Sub Product Product 2 Sub Product Sub Product About Contact JS是： jQuery(document).ready(function () { jQuery(‘#cssmenu’).on(“click”,”li.has-sub .holder”,function () { var element = jQuery(this).parent(‘li’); if (element.hasClass(‘open’)) { element.removeClass(‘open’); element.find(‘li’).removeClass(‘open’); element.find(‘ul’).slideUp(); } else { element.addClass(‘open’); element.children(‘ul’).slideDown(); element.siblings(‘li’).children(‘ul’).slideUp(); element.siblings(‘li’).removeClass(‘open’); element.siblings(‘li’).find(‘li’).removeClass(‘open’); element.siblings(‘li’).find(‘ul’).slideUp(); } }); jQuery(‘#cssmenu ul li.has-sub’).prepend(”); }); 如果选择子菜单，如何展开父菜单。小提琴 […]