क्या कोई मुझे बता सकता है कि सीएसएस का उपयोग करते हुए नेविगेशन बार पर वर्तमान लिंक को कैसे हाइलाइट करना है? मैं नियंत्रक विकल्प का उपयोग नहीं करना चाहता।रेल पर रूबी नेविगेशन बार पर वर्तमान लिंक हाइलाइट करें?
<div id = "navigation">
<ul>
<li id="menu"><%=link_to "Menu", menus_path, :class => "menunav"%></li>
<li id="drink"><%=link_to " Drinks", drinks_path, :class => "drinknav"%> </li>
</ul>
</div>
इस, करने के लिए कुछ तरीके हैं लेकिन यदि आप एक साधारण एक के बाद कर रहे हैं, मैं अपने शरीर को एक वर्ग में जोड़ने का सुझाव: यहाँ साझा/menu.html.erb से कोड है।
<body class="<%= params[:controller] %>_controller">
...
</body>
फिर अपने सीएसएस में आप निम्न कार्य कर सकते हैं। यदि आप एक से अधिक पृष्ठों आप विभाजित करने के लिए, चाहते हैं
body.menus_controller #navigation a.menunav,
body.drinks_controller #navigation a.drinknav {
background-color : yellow
color : blue
}
यह जटिल हो सकता है, लेकिन इस बुनियादी उदाहरण के लिए यह ठीक होना चाहिए।
ऐसा कुछ आपके लिए काम करेगा। बेशक आपको इसे अपने उद्देश्यों में बदलना होगा, शायद मैच के साथ अधिक परिष्कृत हो जाएं (वर्तमान में यह केवल पथ से मेल खाएगा, जैसा कि आपके उदाहरण में है)।
$("#navigation a[href="+window.location.pathname+"]")
.closest('li')
.css('background-color', '#ff0');
अभी भी बेहतर है, तो आप एक "वर्तमान" वर्ग कहीं परिभाषित करना चाहते हैं, तो बस इसे जोड़ने:
/* in some stylesheet */
#navigation li.current { background-color: #ff0; }
/* then the js */
$("#navigation a[href="+window.location.pathname+"]")
.closest('li')
.addClass('current');
पहले दृष्टिकोण controller_name और ACTION_NAME क्या पता लगाने के लिए वर्तमान को संभालने के लिए है पेज पर आप हैं यह अच्छा है, लेकिन यह क्लाइंट-विशिष्ट टेम्पलेट में सर्वर-साइड का थोड़ा सा जोड़ता है। रेल सहायक सहायक उस तरह का उपयोग करता है link_to_unless_current। जेएस का न्यूनतम उपयोग। उदाहरण देखें here
दूसरा $ (स्थान) का विश्लेषण करना है और इसे हाइलाइट करने के लिए चयनित नेविगेशन आइटम में सीधे एक निश्चित श्रेणी जोड़ना है।
तीसरा (किसी ऑब्जेक्ट पर निर्भर करता है) एक मौजूदा वस्तु के साथ जेएस ऑब्जेक्ट बनाना और सक्रिय नौसेना में कक्षा जोड़ने के तरीकों को जोड़ना है। फिर आप इस जेएस क्लास को ऑब्जेक्ट पर गुज़रने और तर्क को समाहित रखने के लिए तत्काल कर सकते हैं।
मैं सुझाव दूंगा कि आप जेएस विलयनता परतों को मिश्रण न करें, उन्हें विचलित रखने की कोशिश करें – Anatoly
यह मेरे लिए बिल्कुल स्पष्ट नहीं है कि आप क्या चाहते हैं। 'वर्तमान लिंक' के साथ आपका मतलब यह है कि वर्तमान पृष्ठ पर इंगित करने वाला लिंक? और 'नियंत्रक विकल्प' के साथ आपका क्या मतलब है? सामान्य समाधान जो मैं प्रस्तावित करता हूं वह है कि आप अपने 'link_to' को अनुकूलित करें और वर्तमान पृष्ठ पर इंगित करते समय' वर्तमान 'वर्ग जोड़ें। – nathanvda